element ui 表格 封装 点击操作列按钮单行高亮

在Element UI的表格（`el-table`）中，封装点击操作列按钮以实现单行高亮通常涉及监听`cell-click`事件并管理状态。这里有两个关键点：

1. **跟踪焦点单元格**[^1]:
当用户点击单元格时，记录当前的行索引 (`row.index`) 和列索引 (`column.index`)，这可以通过`cellClick`方法实现：

   methods: {
      cellClick(row, column) {
         if (focusCell.value !== `${row.index},${column.index}`) {
            focusCell.value = `${row.index},${column.index}`;
            // 可能还需要更新视图以高亮该行
         }
      },
   }

其中 `focusCell` 是用于存储当前焦点位置的变量。

2. **控制高亮状态**:
对于需要动态交互的单元格（如下拉框和输入框），当用户点击单元格并且选中的选项与当前聚焦的单元格匹配时，可以启用相应的组件（如`el-select`）。例如，在`cellClick`事件中检查`focusCell`的值是否与当前单元格一致：

   <template>
     <el-select v-if="focusCell === currentRowIndex && currentColumnIndex" @change="handleSelectChange"></el-select>
     <!-- ...其他单元格内容 -->
   </template>

   methods: {
     handleSelectChange(selectedValue) {
       // 处理选择改变后的逻辑
     },
     ...
   }

要实现这个功能，你需要维护两个额外的变量 `currentRowIndex` 和 `currentColumnIndex`，并在点击事件中更新它们。当你切换到新的单元格时，检查这两个值是否与 `focusCell` 相同，以此决定是否显示交互元素。