效果图(当前时间2022/3/18,星期五):

代码:
// 表格部分
<el-table
ref="table"
:key="tableKey"
v-loading="listLoading"
:empty-text="emptyText"
:data="list"
border
fit
>
<el-table-column v-for="(item,index) in formThead" :key="index" :prop="item.key" :label="item.label"> // 动态表格
<el-table-column :label="item.weekName" /> // 生成第二行,对应日期的星期几
</el-table-column>
</el-table>
// js部分
<script>
export default {
name: 'Detail',
components: { },
data() {
return {
listLoading: false,
tableKey: 0,
emptyText: '暂无数据',
formThead: null,
dayList: [],
list: []
}
},
computed: {
},
mounted() {
this.formThead = [ // 固定列
{ label: '班级', key: '$index', width: '50', minWidth: '10%', fn: undefined },
{ label: '日期', key: 'createTime', width: '', minWidth: '5%', fn: undefined }
]
this.setDayList()
},
methods: {
setDayList() { // 动态添加天数及对应星期几
let nowDate = new Date(Date.parse(new Date()))
let nowDay = nowDate.getDate()
let weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
for (let i = 1; i <= nowDay; i++) {
let firstDate = new Date(Date.parse(new Date()))
firstDate.setDate(i)
let dayNum = { label: i, key: 'createTime', width: '', minWidth: '5%', weekName: weekDay[firstDate.getDay()], fn: undefined }
this.formThead.push(dayNum)
}
}
}
}
</script>