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

在Element UI中，要封装一个点击表格操作列按钮使点击的行高亮显示，可以结合Table组件和Pagination组件来实现。首先，我们需要配置Table组件以支持点击事件，当某行被点击时，会触发对应的事件并更新状态以标记高亮。

以下是一个简单的示例：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <!-- 添加一个操作列 -->
      <el-table-column type="index" label="#" width="45"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <!-- ...其他列... -->

      <!-- 操作列 -->
      <el-table-column
        label="Action"
        width="100"
        align="center"
        show-overflow-tooltip
        @click="handleColumnClick"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="scope.$event.stopPropagation()">Click</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :total="totalCount"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 假设这是你的数据数组
      currentPage: 1,
      totalCount: 0, // 总记录数，根据实际数据动态计算
      highlightedRow: null, // 存储当前高亮行的索引
    };
  },
  methods: {
    handleRowClick(row) {
      this.highlightedRow = row.index; // 更新高亮行
    },
    handleColumnClick() {
      // 当操作列按钮被点击时，取消当前高亮
      if (this.highlightedRow) {
        this.highlightedRow = null;
      } else {
        // 如果之前未高亮任何行，则高亮最近一次点击的行
        this.highlightedRow = this.tableData.length - 1;
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

在这个示例中，`handleRowClick`方法会在点击表格行时设置`highlightedRow`，而`handleColumnClick`则用于在操作列按钮点击时改变高亮状态。请注意，你需要替换`tableData`和`totalCount`为你实际的数据源。