element plus table 行hover方法

Element Plus table 行 hover 方法可以通过设置 CSS 样式来实现。具体步骤如下：

1. 添加 hover 样式

在 CSS 样式表中添加以下样式：

.el-table__row:hover {
  background-color: #f5f7fa;
  cursor: pointer;
}

这样当鼠标悬停在表格行上时，会将该行背景颜色改变为灰色，并将鼠标指针改变为手型。

2. 设置 table-row-class-name 属性

在使用 Element Plus table 组件时，可以通过设置 table-row-class-name 属性来指定表格行的类名。可以将该属性设置为一个函数，该函数返回一个字符串，该字符串为表格行的类名。

在该函数中判断当前行是否被选中或悬停，如果是，则返回对应的类名。示例代码如下：

<el-table :data="tableData" :row-class-name="tableRowClassName">
  <!-- 表格列 -->
</el-table>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 当前悬停的行
      hoverRow: null,
      // 当前选中的行
      selectedRow: null
    };
  },
  methods: {
    // 判断行是否被选中或悬停
    tableRowClassName({ row, rowIndex }) {
      if (row === this.selectedRow) {
        return 'selected-row';
      } else if (row === this.hoverRow) {
        return 'hover-row';
      } else {
        return '';
      }
    }
  }
};
</script>

在上述代码中，tableRowClassName 函数根据当前行是否被选中或悬停，返回对应的类名。在模板中，可以使用该函数来设置 table-row-class-name 属性。

3. 监听 mouseenter 和 mouseleave 事件

在组件中监听表格行的 mouseenter 和 mouseleave 事件，以更新当前悬停的行。示例代码如下：

<el-table :data="tableData" :row-class-name="tableRowClassName">
  <!-- 表格列 -->
</el-table>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 当前悬停的行
      hoverRow: null,
      // 当前选中的行
      selectedRow: null
    };
  },
  methods: {
    // 判断行是否被选中或悬停
    tableRowClassName({ row, rowIndex }) {
      if (row === this.selectedRow) {
        return 'selected-row';
      } else if (row === this.hoverRow) {
        return 'hover-row';
      } else {
        return '';
      }
    },
    // 监听 mouseenter 事件
    handleMouseEnter(row) {
      this.hoverRow = row;
    },
    // 监听 mouseleave 事件
    handleMouseLeave(row) {
      this.hoverRow = null;
    }
  }
};
</script>

在上述代码中，handleMouseEnter 和 handleMouseLeave 方法分别监听 mouseenter 和 mouseleave 事件，以更新当前悬停的行。模板中可以使用 v-on 指令来绑定这两个事件。

<el-table :data="tableData" :row-class-name="tableRowClassName">
  <!-- 表格列 -->
  <template v-slot:row="{row}">
    <tr @mouseenter="handleMouseEnter(row)" @mouseleave="handleMouseLeave(row)">
      <!-- 表格单元格 -->
    </tr>
  </template>
</el-table>

在上述代码中，通过 v-slot 来自定义表格行，然后在 tr 元素上绑定 mouseenter 和 mouseleave 事件，以更新当前悬停的行。