Vue + Element UI 如何动态设置表头,实现“上周”和“本周”的效果?

Vue + Element UI 如何动态设置表头,实现“上周”和“本周”的效果?

如何使用 vue + element ui 动态设置表头?

想实现类似图片的效果,以“上周”和“本周”作为表头,如何实现?

解决之道:

使用两个变量分别表示上周和本周的时间范围,然后将其设置在 el-table-column 组件的 label 属性中即可。

至于上周和本周的时间范围,可以参考 JS 获取当前上周和当前周的周一和周日日期的方法。

举例:

let lastweek = '11-14 ~ 11-20'
let thisweek = '11-21 ~ 11-22'
<el-table-column label="上周"><el-table-column prop="state" :label="lastweek" width="120"></el-table-column></el-table-column><el-table-column label="本周"><el-table-column prop="state" :label="thisweek" width="120"></el-table-column></el-table-column>

以上就是Vue + Element UI 如何动态设置表头,实现“上周”和“本周”的效果?的详细内容,更多请关注www.sxiaw.com其它相关文章!