el-table row 焦点

如果你想在 el-table 组件的行中添加焦点，则可以使用 el-table 的 highlight-current-row 属性。将该属性设置为 true，即可启用当前行高亮。然后，你可以使用 CSS 样式自定义当前行的外观。如下所示：

<template>
  <el-table :data="tableData" highlight-current-row @row-click="handleRowClick">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Jane', age: 22 },
        { name: 'Bob', age: 25 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      console.log('Clicked row:', row)
    }
  }
}
</script>

<style>
.el-table__row--current {
  background-color: #f5f7fa;
}
</style>

在上面的代码中，我们设置了 highlight-current-row 属性为 true，这使得 el-table 组件启用了当前行高亮功能。我们还使用了 CSS 样式来定义当前行的背景颜色。在表格中单击行时，会触发 handleRowClick 方法，该方法会将当前行的数据打印出来。