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其它相关文章!