el-table表格根据当前日期动态显示日期表头
时间: 2023-10-18 09:18:24 浏览: 40
在el-table中动态显示日期表头,可以通过计算出当前日期到未来7天的日期,然后将其渲染到表格的表头中。
代码示例:
```
<template>
<el-table :data="tableData" border>
<el-table-column
v-for="(date, index) in dateList"
:key="index"
:label="dateStr(date)"
prop="data"
></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ data: [1, 2, 3, 4, 5, 6, 7] },
{ data: [2, 3, 4, 5, 6, 7, 8] },
{ data: [3, 4, 5, 6, 7, 8, 9] },
{ data: [4, 5, 6, 7, 8, 9, 10] },
{ data: [5, 6, 7, 8, 9, 10, 11] },
],
dateList: [], // 存储未来7天的日期
};
},
created() {
const currentDate = new Date();
for (let i = 0; i < 7; i++) {
const date = new Date(currentDate);
date.setDate(date.getDate() + i);
this.dateList.push(date);
}
},
methods: {
dateStr(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}-${month}-${day}`;
},
},
};
</script>
```
在这个代码示例中,首先在created钩子中计算出当前日期到未来7天的日期,并将其存储在dateList数组中。然后在表格的表头中,使用v-for循环渲染出每个日期所对应的表头。其中,dateStr方法用于将日期对象转换成字符串格式,方便在表头中显示。