javascript - vue 表格中点击表头改变颜色,事件中改变的属性,不能更新到样式上
本文介绍了javascript - vue 表格中点击表头改变颜色,事件中改变的属性,不能更新到样式上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
实现点击表头改变背景颜色,active值改变反馈不到class属性上?怎么修改?
<div class="tableList">
<table border="" cellspacing="" cellpadding="">
<tr><th v-for="head in tableHeads" @click="orderBy(head)" :class="{active: head.active}">{{head.label}}</th></tr>
<tr v-for="item in tableData">
<td v-for="head in tableHeads">{{ item[head.key] }}</td>
</tr>
</table>
</div>
methods :{
orderBy(headItem){
this.tableHeads.map((item) =>{
item.active = false
return item
})
headItem.active = true;
}
},
.tableList th.active{
background: #35495e;
}
解决方案
orderBy(head){
this.tableHeads.map((item) =>{
if(item.active||item.active==undefined)
this.$set(item,'active',false)
})
this.$set(head,'active',true);
}
这篇关于javascript - vue 表格中点击表头改变颜色,事件中改变的属性,不能更新到样式上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文