element-plus el-table-v2点击行选中背景颜色
时间: 2025-04-22 21:00:14 浏览: 49
### Element Plus el-table-v2 点击行 改变选中行背景颜色 实现方法
在 `el-table-v2` 组件中实现点击行时改变选中行的背景颜色,可以采用样式绑定的方式结合事件处理逻辑完成。具体来说,在表格配置项里设置行点击事件处理器,并通过状态管理当前被选中的行数据。
对于样式的动态应用,可以在每一行的数据对象上增加一个属性用于标记该行是否处于选中状态;或者维护一个外部变量保存最新一次点击所对应的整条记录作为选定行的信息。当某一行遭到点击之后更新这个标志位或外置变量的内容并触发视图重绘,从而达到切换高亮的效果[^1]。
下面给出一段基于 Vue Composition API 编写的示范代码:
```javascript
import { ref } from 'vue';
// 假设这是你的原始数据列表
const dataList = [
/* ... */
];
let selectedRowKey = ref(null);
function handleRowClick({ rowData }) {
// 更新选中行键值
selectedRowKey.value = rowData.typeId;
}
<template>
<div class="table-container">
<!-- 表格组件 -->
<el-table-v2
:columns="columns"
row-key="typeId"
:row-height="30"
:data="dataList"
width="400"
height="400"
fixed
:row-class-name="(rowIndex) => (selectedRowKey === dataList[rowIndex].typeId ? 'highlight' : '')"
@click="handleRowClick"
/>
</div>
</template>
<style scoped>
/* 自定义CSS类名以控制样式 */
.highlight {
background-color: #d9edf7 !important; /* 设置你想要的颜色 */
}
</style>
```
此段代码展示了如何监听行点击事件以及利用 CSS 类来更改特定行的外观表现形式。注意这里使用了 `@click` 来替代原例子中的 `row-event-handlers="{ onClick: rowClick }"` 方式指定回调函数,因为后者可能不支持直接修改 DOM 属性的操作需求。
另外需要注意的是,如果希望仅有一行保持高亮,则每次点击新行前需先清除之前的选择标记;而允许多选的情况下则要调整相应的判断条件和存储结构。
阅读全文