效果图:
当前时间是:2024年8月29日,表格中的动态日期列是展示的前7天+后10天共计18天。
如果想要实现这样的效果,可以考虑将这18天的日期表头统一放到一个列中,内容也是如此。
解决步骤1:自定义表头+自定义列
columns
列可以写成下面的形式:
this.columns = [{
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'action' },
width: 24 * 5 * 18,//共计18天,每天24小时,我这边一个小时算5px,则整列的宽度就是 24*5*18
align: 'center',
}];
解决步骤2:表头的写法
需要获取18天的日期数据
下面的代码使用前提是 先安装moment
插件
let timeArr = [
moment().subtract(7, 'days').format('YYYY/MM/DD'),//当前日期减去7天
moment().add(10, 'days').format('YYYY/MM/DD'),//当前日期加上10天
];
获取两个日期中间的所有数据
getDatesBetween(startDateString, endDateString) {
var startDate = new Date(startDateString);
var endDate = new Date(endDateString);
var datesArray = [];
while (startDate <= endDate) {
datesArray.push({
month: moment(new Date(startDate)).format('M'),
day: moment(new Date(startDate)).format('D'),
});
startDate.setDate(startDate.getDate() + 1);
}
return datesArray;
},
使用:
this.动态列 = this.getDatesBetween(timeArr[0], timeArr[1]);
我想要的动态列
的格式是month月份+day日期
的形式。
上面是此功能实现的最重要的部分。
多多积累,多多收获!!!