el-table type="selection"选中某一行高亮

### 实现 `el-table` 中 `type='selection'` 的行选中高亮效果 在 Element-UI 的 `el-table` 组件中，可以通过设置属性和绑定事件来实现当用户通过复选框 (`type='selection'`) 或点击数据行时，选中的行能够高亮显示的效果。 #### 方法一：使用 `highlight-current-row` 属性 如果只需要单行高亮，则可以直接配置 `highlight-current-row` 属性。这会使表格自动高亮当前选中的那一行[^1]。 ```vue <template> <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 22 } ] }; }, methods: { handleCurrentChange(currentRow) { console.log('当前选中的行:', currentRow); } } }; </script> ``` 这种方法适用于仅需单行高亮的情况。 --- #### 方法二：动态控制多行高亮 对于支持多选的场景（即允许同时选中多行），需要手动处理行点击事件以及复选框状态变化逻辑。以下是具体实现： ##### HTML 部分 绑定 `@row-click` 和 `toggleRowSelection` 来监听行点击并更新选中状态[^2]。 ```vue <template> <el-table ref="multipleTable" :data="tableData" @row-click="handleRowClick" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> ``` ##### JavaScript 部分 通过 `$refs.multipleTable.toggleRowSelection(row)` 动态切换某一行的选中状态，并保持其高亮效果。 ```javascript <script> export default { data() { return { tableData: [ { name: '王五', age: 28 }, { name: '赵六', age: 30 } ], multipleSelection: [] }; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleRowClick(row) { this.$refs.multipleTable.toggleRowSelection(row); // 切换选中状态 } } }; </script> ``` 上述代码实现了点击任意一行时，该行会被标记为选中或取消选中，同时视觉上也会有对应的高亮效果。 --- #### 自定义样式增强 为了进一步优化用户体验，还可以自定义已选中行的背景颜色或其他样式[^3]。例如，在 `<style>` 标签下添加如下 CSS 定义： ```css <style scoped> .el-table .el-table__body tr.current-row>td { background-color: #f0f9eb !important; /* 设置高亮背景色 */ } </style> ``` 注意：这里的 `.current-row` 是由 Element-UI 自动生成的一个类名，用于标识当前被选中的行。 --- ### 总结 通过以上两种方法，可以分别满足单行或多行高亮的需求。其中，`highlight-current-row` 更适合简单的单行操作；而结合 `@row-click` 和 `toggleRowSelection` 能够灵活应对复杂的多选场景。 ---