el-table被点击行添加背景颜色

shiyina2024-05-12 12:51

在 Element UI 的 el-table 组件中，你可以通过使用行样式 row-style 属性来为被点击的行添加颜色。首先，你需要在数据中定义一个对象来存储被点击行的索引，然后在 row-style 函数中根据这个索引来返回不同的样式。

以下是一个示例：

复制代码

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
    :row-style="rowStyle">
    <el-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      tableColumns: [
        { prop: 'id', label: 'ID', width: 180 },
        { prop: 'name', label: '姓名', width: 180 },
        { prop: 'age', label: '年龄', width: 180 },
      ],
      activeRowIndex: null, // 存储被点击行的索引
    };
  },
  methods: {
    handleRowClick(row, event, column) {
      this.activeRowIndex = row.id; // 假设每行都有一个唯一的 id
    },
    rowStyle({ row, rowIndex }) {
      if (this.activeRowIndex === row.id) {
        return { backgroundColor: '#f0f9eb' }; // 返回被点击行的样式
      }
      return {}; // 返回其他行的默认样式
    },
  },
};
</script>

在这个示例中，我们定义了一个 activeRowIndex 数据属性来存储被点击行的 id。当行被点击时，handleRowClick 方法会被调用，并将被点击行的 id 存储在 activeRowIndex 中。row-style 函数会为每一行返回一个样式对象，如果当前行的 id 与 activeRowIndex 匹配，那么这行就会应用背景色 #f0f9eb，否则返回一个空对象，表示不应用任何特殊样式。

请注意，这个示例假设每行数据都有一个唯一的 id 属性。如果你的数据没有 id，你可以使用其他唯一标识符，或者直接使用 rowIndex。但是，如果数据会动态变化（例如排序或过滤），使用 rowIndex 可能会导致问题，因为它不会随着数据的改变而更新。