vue2如何对Element表格清楚选中行高亮

在Vue2中，你可以通过Element UI的表格组件`el-table`以及其提供的API来实现在点击行时高亮选中的效果。下面是一个简单的步骤：

1. 首先，在模板中给每一行添加一个`@click`事件处理器，用于触发行的选择操作，并同时改变行的样式。例如：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列... -->
    <el-table-column label="操作" prop="action">
      <template slot-scope="{ row }">
        <el-button @click="highlightRow(row)" type="primary">选择</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

2. 创建一个方法`highlightRow`，接收当前选中的行数据作为参数，然后更新该行的样式。这里可以用自定义属性如`:class`来控制高亮样式，比如设置`.selected`类：

<script>
export default {
  data() {
    return {
      tableData: [], // 表格的数据
      selectedRowKeys: [] // 记录选中的行key
    };
  },
  methods: {
    highlightRow(row) {
      if (this.selectedRowKeys.includes(row.id)) {
        this.$set(row, 'highlight', false); // 取消高亮
      } else {
        this.selectedRowKeys.push(row.id);
        this.$set(row, 'highlight', true); // 设置高亮
      }
    },
    handleSelectionChange(selectedRows) {
      this.selectedRowKeys = selectedRows.map(row => row.id);
    }
  },
  computed: {
    // 如果需要，也可以在这里计算是否高亮，避免在每个row上都设置data
    highlightedRows() {
      return this.tableData.filter(row => row.highlight);
    }
  }
};
</script>

在上面的代码中，`highlightRow`方法会切换`highlight`这个自定义属性的值，而`handleSelectionChange`则处理用户在列表中选择的行。