ElementUI-table高亮问题_element表格双击某一行时才高亮 单击不高亮

第一类：初始化或刷新界面默认第一行高亮

//1.0 加入:row-class-name="tableRowClassName"
<el-table  :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

//2.0 methods中写入方法
methods: {
  tableRowClassName({row, rowIndex}) {
     if (rowIndex === 0) {
       return 'youClassName';
     } 
     return '';
   }
 },
 //3.0 自定义默认高亮样式
 <style>
  .el-table .youClassName {
    background: 'red';
    color:'white'
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

！！！注意：以上可以解决默认首行(任意行)高亮问题，但是–但是-但是，现在点击任意行让其显示也显示高亮时，问题来了，第一行和当前选中行均高亮，咱不看其他高亮方法，直接顺着刚才的已有代码下行继续实现功能

解决思路
1.不受高亮首行影响，继续写当前行高亮样式及写法且写成与高亮一样的样式；
2.在点击当前行的时候取掉首行不高亮；
1
2
3

直接上代码
1. <el-table 添加@row-click="onLink" :highlight-current-row="true"写成如下
<el-table  @row-click="onLink" :highlight-current-row="true" :row-class-name="tableRowClassName">
2.定义一个变量(个人想的办法，非官方推荐)，当点击时候变化，取消第一行高亮
data() {
      return {
        isHigh: 0  //个人定义变量
      }
    },
//methods中方法改成这种
    tableRowClassName({
        row,
        rowIndex
      }) {
        if (this.isHigh === 0) {
          if (rowIndex === 0) {
            return 'success-row';
          }
        }
        return '';
      },
     onLink(row, cloumn, event) {
        this.isHigh =1;
        //xxxx其他操作
      },

css中样式添加hover效果及当前行高亮自定义样式

.el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: rgb(24, 144, 255);
      color: white;
    }

.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
   .el-table__body tr.current-row>td {
      color: white;
      background-color: rgb(24, 144, 255) !important;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

最后来一份完整代码

//css ---<style lang="scss">
.el-table .success-row {
      background: rgb(24, 144, 255);
      color: white;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: rgb(24, 144, 255);
      color: white;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
    .el-table__body tr.current-row>td {
      color: white;
      background-color: rgb(24, 144, 255) !important;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//templete代码

<el-table :data="deviceList" border @row-click="onLink" :highlight-current-row="true" :row-class-name="tableRowClassName">

1
2
3
4

//js代码
export default {
    data() {
      return {
        isHigh: 0
      }
    },
    methods: {
      onLink(row, cloumn, event) {
        this.isHigh =1;
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (this.isHigh === 0) {
          if (rowIndex === 0) {
            return 'success-row';
          }
        }
        return '';
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

等下次遇到同类需求，就研究其他更好的办法，然后记录下来–2021-03-19 @gdr