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

在Element UI中，要封装一个表格组件并实现点击操作列按钮时高亮显示对应行，你可以按照以下步骤设置：

1. 使用`el-table`组件作为基础表格结构，它有内置的事件监听机制可以用于处理单击事件[^1]。

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <!-- ...其他列定义 -->
    <el-table-column type="operation" label="操作">
      <template slot-scope="scope">
        <el-button @click="highlightRow(scope.$index)">操作</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 表格数据
      ],
    };
  },
  methods: {
    handleRowClick(index) {
      this.highlightRow(index); // 当点击行时，调用此方法高亮指定行
    },
    highlightRow(index) {
      // 更新表格数据状态或样式，使某行变为高亮（可能涉及CSS类名）
      this.tableData[index].highlighted = true; // 假设`highlighted`属性用于标识高亮状态
    },
  },
};
</script>

2. 在`handleRowClick`方法中，当你点击操作列的按钮时，传入的`index`参数表示点击行的位置，然后调用`highlightRow`方法更新该行的状态。

3. 如果你想改变表格的视觉效果，可以在CSS中定义一个名为`highlighted`的类，给高亮行添加此类。

.highlighted {
  background-color: yellow; /* 可以自定义你喜欢的颜色 */
}