需求分析
我记得之前我是写过一篇文章，写的是怎么根据用户选择的天数来重置当前的表头数量，那么当时我写的是将天数改变，但是一直没有改变的是开始的日期，我当时写的是没有处理好第一天的日期，所以一直没有更新，那么其实我们既然是需要定制自己的表头的话，开始的日期一般是不会固定的，所以我们今天就简单的写一下怎么根据用户的输入的日期来改变表头的第一天的日期。
产品原型
源码
代码语言：javascript复制 <el-date-picker
style="width: 100%"
v-model="startTime"
type="date"
size="mini"
@change="set_time"
placeholder="选择开始时间">
</el-date-picker>
<el-table
size="mini"
:cell-style="{textAlign:'center'}"
:header-cell-style="{background:'#F4F4F4',textAlign:'center'}"
:data="tableData"
height="250"
style="width: 100%;">
<el-table-column
prop="room_type"
label="可预定数/当日价"
width="150">
</el-table-column>
<template v-for="(col,index) in base_title">
<el-table-column :prop=col.prop :label=col.label>
</el-table-column>
</template>
</el-table> /**
* @set_time 重置用户选择的时间
* @params no
*/
set_time(){
let that = this;
console.info(that.startTime);
that.change_days();
},
/**
* @change_days 改变table的表头数量
* @params no
*/
change_days(){
let that = this;
that.base_title = [];
that.base_title_future = [];
let Max_length = 7;
for(let i = 0;i<Max_length;i ){
//that.value_date = that.value_dateVal;
let param = {
label : that.getDay(i),
prop : that.getDay(i)
};
that.base_title.push(param);
}
console.info(that.base_title);
},
/**
* @getDay 获取日期
* @params day 天数
*/
getDay(day){
let that = this;
let curr_data = new Date();
let target_day_milliseconds = '';
that.startTime ? target_day_milliseconds= that.startTime.getTime() 1000*60*60*24*day : target_day_milliseconds= curr_data.getTime() 1000*60*60*24*day;//判断时间是不是存在的
curr_data.setTime(target_day_milliseconds); //将时间戳转为正常的时间格式
let tYear = curr_data.getFullYear();
let tMonth = curr_data.getMonth();
let tDate = curr_data.getDate();
tMonth = that.doHandleMonth(tMonth 1);
tDate = that.doHandleMonth(tDate);
return tYear "-" tMonth "-" tDate;
},
doHandleMonth(month){
let m = month;
if(month.toString().length === 1){
m = "0" month;
}
return m;
},PS ：这里有的人不是这样的写法，有的人会直接重置当前用户选择的日期，而不是最终赋值的那个数据，那么其实是不对的，如果不是最终绑定的数据的话，会导致的一个问题是我们的数据会被不停的重置，而不是我们需要的数据，自己的写的时候就会明白了。
