el-table 点击的单元格变色 其他单元格不变

在 Vue 中，`el-table` 是 Element UI 提供的一个用于展示表格的数据组件。如果你想实现在点击某一行或某个单元格后，该单元格背景色变化，而其他单元格保持原样，你可以使用 `cell-style` 或 `row-class-name` 属性，并结合事件处理函数（如 `@click`）来实现动态样式。

这里是一个简单的例子：

<template>
  <el-table :data="tableData" @click="handleCellClick">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列... -->
    <el-table-column prop="colorColumn" cell-style="{ background-color: selectedColor ? '#ccc' : '' }">
      <template slot-scope="scope">
        <span @click="handleCellClick(scope.$index, scope.row.colorValue)">{{ scope.row.colorValue }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { colorColumn: 'value1', ... },
        { colorColumn: 'value2', ... },
        // 更多数据...
      ],
      selectedColor: false,
      selectedRow: null,
    };
  },
  methods: {
    handleCellClick(index, value) {
      this.selectedColor = !this.selectedColor; // 切换颜色状态
      this.selectedRow = this.tableData[index]; // 保存选中的行
    },
  },
};
</script>

在这个例子中：
- `cell-style` 钩子接收一个对象作为参数，我们可以根据 `selectedColor` 变量决定当前单元格的背景色。
- `handleCellClick` 方法会在点击单元格时被触发，将单元格的颜色状态翻转，并记住当前选中的行。
- 当用户再次点击同一单元格时，颜色会恢复到原始状态。

如果你想要其他单元格保持不变，只需要在 `handleCellClick` 中不改变 `selectedColor` 的值即可。

相关问题--
1. 如何在 `el-table` 中设置单元格的点击事件？
2. `cell-style` 和 `row-class-name` 在这个场景下有什么区别？
3. 如何避免每次点击都影响所有单元格的样式？