elementui表格自定义列根据scope值动态改变样式不生效的解决方法

一、首先上需求，如下图

 操作列是我自定义的一列，需求就是点击哪一行就改变点击按钮的样式，还原其他行按钮！

遇到过几次这种需求了，每次都想不起来之前是怎么解决的，这次写个博客备忘一下。

下面进入主题！！

1、html部分

 2、数据

这个lastClick后面会用到

 

 3、js部分

在这一块我首先是在mounted生命周期里面遍历数据，给每一个对象都增加一个isClick，用于判断当前行是否被点击过

 mounted() {
    this.tableData.forEach(t => {
      this.$set(t, 'isClick', false)
    })
  },

注意使用$set，这样添加的数据才是响应式，否则无效！

下面就是最后的点击函数了，

changeColor(item) {
        console.log(item)
        if (this.lastClick) this.$set(this.lastClick.row, 'isClick', false)
        this.lastClick = item
        this.$set(item.row, 'isClick', true)
      }

二、over！!