【vue】element-ui表格问题

表格展开嵌套表格hover错位问题

嵌套如下：

解决方案：

1
2
3
4
5
<el-table
  :row-class-name="rowClassName"
  @cell-mouse-enter="handleMouseEnter"
  @cell-mouse-leave="handleMouseLeave"
></el-table>
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
/**
 * mixin
 * 动态给表格添加hover
 */
export default {
  data() {
    return {
      cellIndex: -1,
    }
  },
  methods: {
    // 鼠标进入单元格
    handleMouseEnter(row) {
      this.tableList.forEach((item) => {
        if (row.id === item.id) {
          this.cellIndex = row.id
        }
      })
    },
    // 给相应的rowIndex添加类名
    rowClassName({ row, rowIndex }) {
      let r = -1
      this.tableList.forEach(() => {
        if (this.cellIndex === row.id) {
          r = rowIndex
        }
      })
      if (rowIndex === r) {
        return 'roc-hover-row'
      }
    },
    // 鼠标离开
    handleMouseLeave() {
      this.cellIndex = -1
    },
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 表格嵌套 hover错乱bug   配合mixin tableHover.js使用 */
.hover-row {
  background: #fff !important;
  td {
    background: #fff !important;
  }
}
.roc-hover-row {
  background: #f5f7fa !important;
  td {
    background: #f5f7fa !important;
  }
}