el-table 自定义选中行高亮及自定义展开行图标_element table 自定义高亮行

效果：

1、自定义选中行高亮

a、每次选择项变动时存下当前选择项的 唯一标识。 我这里是 sign。 注意我的需求是通过 checkbox 实现的单选效果，所有选中项只有一个。

b、通过 el-table 的 row-class-name 属性，动态设置当前行的类名。
methods 方法里：
例如我这里： 选中项类名为 activeChooseRow

    // 动态获取当前行类名
    gotRowClass ({ row }) {
      const chooseId = this.chooseRowSign
      if (row.sign === chooseId) {
        return 'activeChooseRow tableRow'
      }
      return 'tableRow'
    },
1
2
3
4
5
6
7
8

设置样式：

    /deep/ .activeChooseRow {
      border: 1px solid var(--blue300);
      border-radius: 4px;
      &:hover {
        background: var(--blue100) !important;
        td {
          background: var(--blue100) !important;
        }
      }
    }
1
2
3
4
5
6
7
8
9
10

2、通过 css 来修改树形 table 的展开收起图标

a、在 element 图标组件示例页中， f12 找到想要的图标的 content 值。 例如我这里是个三角

b、复制图标的 content，修改样式

    // 自定义展开项图标
    /deep/ .el-table__expand-icon .el-icon-arrow-right:before {
      content: '\e791';
    }
    // 图标大小和颜色
    /deep/ .el-table__expand-icon {
      font-size: 16px;
      color: var(--grey500);
    }
1
2
3
4
5
6
7
8
9

效果：