在 Element UI 的 el-table 组件中，你可以通过使用行样式 row-style 属性来为被点击的行添加颜色。首先，你需要在数据中定义一个对象来存储被点击行的索引，然后在 row-style 函数中根据这个索引来返回不同的样式。
以下是一个示例：
<template><el-table:data="tableData"@row-click="handleRowClick":row-style="rowStyle"><el-table-columnv-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 可能会导致问题，因为它不会随着数据的改变而更新。
)
