我们都知道element提供了table的组件,非常的好用,前面我也写过一些,但是这次的需求是这样的,就是用户可以自己选择时间,自己选择天数,选择以后呢就可以直接生成起始日期为用户选择的,列数是用户选择的天数,那么表头还要显示出对应的星期。这里的目的是为了实现给用户选择会场的时间段,这样可以直接进行选择,也可以一目了然的选择会场的使用情况。(这个功能下面是没有展示使用情况的)
1、画一个静态的table 2、将表头改为上图的布局 3、写一个可以自动计算当前日期加上往后天数的方法 4、将表头绑定一个可变化的数组 5、将下拉框的组件画上 6、改变数组->实现功能
<template v-for="(col,index) in base_title">
<el-table-column :label="col.label">
<el-table-column
prop="morning"
label="上午"
width="120">
</el-table-column>
<el-table-column
prop="afternoon"
label="下午"
width="120">
</el-table-column>
</el-table-column>
</template>
/**
* @change_days 改变table的表头数量
*/
change_days(){
let that = this;
that.base_title = [];
let Max_length = that.value;
console.log(Max_length )
for(let i = 0;i<Max_length;i++){
that.value_date = that.value_dateVal;
let param = {
label : that.getDay(i)+""+(that.getWeek(that.getDay(i).toString())),
prop : that.getDay(i)
};
that.base_title.push(param);
}
console.info(that.base_title);
},
/**
* @getDay 获取日期
* @doHandleMonth
* @getWeek 获取当前星期
*/
getDay(day){
let that = this;
let value_day = new Date();
let target_day_milliseconds= value_day.getTime() + 1000*60*60*24*day;
value_day.setTime(target_day_milliseconds); //注意,这行是关键代码
let tYear = value_day.getFullYear();
let tMonth = value_day.getMonth();
let tDate = value_day.getDate();
tMonth = that.doHandleMonth(tMonth + 1);
tDate = that.doHandleMonth(tDate);
return tYear+"-"+tMonth+"-"+tDate;
},
getWeek(dateString){
let weekArray = ["(星期日)", "(星期一)", "(星期二)", "(星期三)", "(星期四)", "(星期五)", "(星期六)"];
return weekArray[new Date(dateString).getDay()];
},
doHandleMonth(month){
let m = month;
if(month.toString().length === 1){
m = "0" + month;
}
return m;
},
有几个是需要注意的地方:
这套代码基本的功能是实现了,但是没有经过任何的优化的,你们可以自己进行一些优化。喜欢的可以关注一下,一起进步。