【Web前端问题】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);
        }

回答：

orderBy(index){

let arr =this.tableHeads
arr.map((item,i)=>{
  if(item.active){
      item.active=false
  }
})
arr[index].active=true
this.tableHeads=arr  // 要给如果data是obj或者数组，要给他重新赋值，才能触发视图渲染

}

以上是 【Web前端问题】vue 表格中点击表头改变颜色，事件中改变的属性，不能更新到样式上 的全部内容， 来源链接： utcz.com/a/135006.html

回到顶部