vue2中动态改变el-table表格(其中有固定列)的选中行颜色

1.要改变hover的颜色只需要使用el-table的row-class-name属性即可

template部分 (el-table的其他属性这里没有写出来)

<el-table :row-class-name="tableRowClassName">

script部分

tableRowClassName({ row, rowIndex }) { 
        // row是你这一行的数据 rowIndex是这一行的序号
        // 你可以根据自己的需要的条件来动态更改颜色
        // 我这里使用了当前行数据中的state属性
        // 这里return的字符串名称就是你在css中写的类名 (这里注意不要在字符串类名前加'.')
        if (row.state === '1') {
          return 'special-row';
        }
        return 'common-row';
      },

style部分(这里有使用scoped)

这里面的.special-row和.common-row可以根据自己的return的类名来改

/deep/ .el-table__body .el-table__row.special-row.hover-row td {
  background-color: #89ebd1 !important;
}
/deep/ .el-table__body .el-table__row.common-row.hover-row td {
  background-color: #f2f3f5 !important;
}

---

2.改变复选框选中后行的颜色

这里要利用到el-table的一个方法selection-change

template部分 (table其他属性自己加)

  <el-table
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      >

script部分

    // 当前行复选框被选中时
      handleSelectionChange(row) {
        // 这个row值得是你所有选中行放回的数组
        // 将这个值赋值给selectedRows这个vue全局变量(就是在data中定义的变量)
        this.selectedRows = row
      },

        // select-special-row就是被选中行的颜色
         // row是你这一行的数据 rowIndex是这一行的序号
         // 你可以根据自己的需要的条件来动态更改颜色
        // 我这里使用了当前行数据中的state属性
        // 这里return的字符串名称就是你在css中写的类名 (这里注意不要在字符串类名前加'.')   
       tableRowClassName({ row, rowIndex }) { 
        if (row.state === '1') {
          if(this.selectedRows.includes(row)) {     
            return 'select-special-row'
          }
          return 'special-row';
        }
        if(this.selectedRows.includes(row)) {
          return 'select-common-row'
        }
        return 'common-row';
      },

style部分

/deep/ .select-special-row {
  background-color: #b7f5e2;
}
/deep/ .select-common-row {
  background-color: #E8FBFF;
}
/deep/ .el-table__body .el-table__row.special-row.hover-row td {
  background-color: #89ebd1 !important;
}
/deep/ .el-table__body .el-table__row.common-row.hover-row td {
  background-color: #f2f3f5 !important;
}
// 这下面两个样式是防止在表格选中以后鼠标移上去选中的颜色又变成原来eltable自带的颜色
/deep/ .el-table__body .el-table__row.select-special-row.hover-row td {
   background-color: transparent !important;
  }
/deep/ .el-table__body .el-table__row.select-common-row.hover-row td {
   background-color: transparent !important;
 }