element ui 表格选择框选中变色

第一种：有不一样的数值可区分（比如id）：

   元素表格：

<el-table 
     ref="tableData" 
     :data="tableData"
     @selection-change="handleSelectionChange"
     :row-class-name="rowStyle"
     border
     v-loading="loading"
>

  方法：

 data() {
    return {
      loading: false,
      tableData: [],
      multipleSelection: [],//选中的数据
    }
  },
 methods: {
   handleSelectionChange(selection) {
      this.multipleSelection = selection
   },
   //勾选数据行的 Checkbox 时触发的事件
   rowStyle({row}) {
      //比较的数据(能够区分的数据)   
      let arr = this.multipleSelection.map(item => item.id)
      for (let i = 0; i < arr.length; i++) {
        if (row.id=== arr[i]) {
          return 'rowStyle'
        }
      }
   },
 },

  样式表：

//table选中高亮
.rowStyle {
  background-color: #ECF5FF !important;
}

第二种无数据区分（id相同），就在读取接口数据的时候设置不同的字段与值：

methods: {
   search() {
      this.loading = true
      API.then(res => {
        this.loading = false
        //赋值渲染
        this.tableData = res.data       
        //区分
        this.tableData.forEach((i, index) => {
          this.tableData[index].chooseIndex = index
        })
      }).catch(() => {
        this.loading = false
      })
   },
   rowStyle({row}) {
      let arr = this.multipleSelection.map(item => item.chooseIndex)
      for (let i = 0; i < arr.length; i++) {
        if (row.chooseIndex === arr[i]) {
          return 'rowStyle'
        }
      }
   },
}