element ui 表格 封装一个 点击表格的操作列按钮使点击的那行高亮显示

在Element UI的Table组件中，要实现点击操作列按钮时对应行的高亮显示，你可以这样做：

1. 首先，确保你已经安装了Element UI库并导入所需的组件，包括`el-table`和`el-pagination`。

<template>
  <div>
    <el-pagination :total="total" @current-change="handleCurrentChange"></el-pagination>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <!-- 添加其他列 -->
      <el-table-column prop="action" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="highlightRow(scope.$index)" :class="{ active: isRowActive(scope.$index) }">操作</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 假设这是你的表格数据
      total: 0,
      isRowActive: () => false, // 初始状态不选中任何行
    };
  },
  methods: {
    handleCurrentChange(page) {
      // 当页数改变时，这里可以更新分页逻辑
    },
    highlightRow(index) {
      this.isRowActive(index) ? this.isRowActive(index) = false : this.isRowActive(index) = true; // 根据索引设置行高亮
      // 更新UI以反映新的高亮状态
    },
  },
};
</script>

2. 在`methods`中，`highlightRow`方法接收行的索引作为参数。当点击按钮时，它会切换当前行的高亮状态。`isRowActive`数组用于跟踪哪些行处于活动状态，初始时全部设为`false`。当调用`highlightRow`时，如果当前行已被标记为活跃，则取消高亮，否则将其标记为活跃。

注意：以上代码示例简化了高亮效果的具体实现，实际应用可能需要与视图层（如CSS）结合来展示高亮样式。另外，你需要确保`tableData`和`total`属性已正确初始化和更新。