el-table hover当前行高亮

在element-ui中，el-table组件提供了hover-row-highlight属性，设置为true时，鼠标移动到表格行上时会高亮当前行。同时，也可以通过设置row-class-name属性来自定义行的样式，从而实现更加灵活的效果。

举个例子，以下是一个简单的el-table示例：

<template>
  <el-table :data="tableData" hover-row-highlight row-class-name="highlight-row">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
      ],
    };
  },
};
</script>

<style scoped>
.highlight-row {
  background-color: #f5f7fa;
}
</style>

在上面的示例中，我们设置了hover-row-highlight属性为true，并自定义了highlight-row样式类来控制行的高亮效果。当鼠标移动到表格行上时，就会出现高亮效果。