antd——table表格动态列——展示日期的列+内容——技能提升

效果图：

当前时间是：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日期的形式。

上面是此功能实现的最重要的部分。

多多积累，多多收获！！！