vue表格背景轮播

其实实现表格背景轮播，主要是通过给所需高亮的那一行添加class类名，在mounted（加载完成之后执行）中通过setInterval() 方法来实现轮播效果

<table> <thead> <tr> <th v-for="(item, index) in tableColumns" > {{ item.label }} </th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :class="{ content_active : currentId === index }"> <td>{{ item.td_a }}</td> <td>{{ item.td_b }}</td> <td>{{ item.td_c }}</td> </tr> </tbody> </table> <script> export default { name: 'text', data() { return { currentId: 0, tableColumns: [], // 表头数据 tableData: [] // 表格数据 } }, mounted() { let self = this self.$nextTick(() => { setInterval(() => { self.currentId++ if (self.currentId > 4) { self.currentId = 0 } }, 2000) }) } } </script> <style lang="less"> .content_active { background: url('../../../assets/common/td_background.png') no-repeat; // no-repeat 是为了防止循环显示背景图 background-size: 100% 100%; } </style>

核心代码

:class="{ content_active : currentId === index }" let self = this self.$nextTick(() => { setInterval(() => { self.currentId++ if (self.currentId > 4) { self.currentId = 0 } }, 2000) })