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

本篇文章给大家分享《Vue + Element UI 如何动态设置表头，实现“上周”和“本周”的效果？ 》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

如何使用 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 label="本周">
  <el-table-column prop="state" :label="thisweek" width="120" />
</el-table-column>

好了，本文到此结束，带大家了解了《Vue + Element UI 如何动态设置表头，实现“上周”和“本周”的效果？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！