526互联

el-table指定行背景颜色更换，并且鼠标移入后行背景色保持不变

发布时间 2023-06-06 15:18:50作者: Evident

思路：通过设置:row-class-name="tableRowClassName"  和  :cell-style="tableCellstyle"

1、设置行变色

<el-table       
             :data="dataList"        
              :row-class-name="tableRowClassName"
              :cell-style="tableCellstyle"
 >

methods中写方法：

  tableRowClassName(row, rowIndex ) {
      if (row.row.name == 'test') {
        return 'rowColor'
      }
      return ''
 },

 

style中设置class属性：

::v-deep .el-table .rowColor{
    background: #f3c298;
}

 

2、置好背景色后发现，每次鼠标移入到变色的行上面，背景色就会变成灰色，要求是移入后也应该是变过色的背景色

  tableCellstyle(row, rowIndex) {
      if (row.row.name == 'test') {
        return 'background:  #f3c298'
      }
      return ''
 },