element plus el-table的属性highlight-current-row可以自定义颜色吗,如何设置
时间: 2024-01-03 08:06:03 浏览: 312
Element Table的row-class-name无效与动态高亮显示选中行背景色
5星 · 资源好评率100%
是的,`highlight-current-row` 属性可以自定义颜色,可以通过设置 `row-class-name` 属性来实现。
具体步骤如下:
1. 在 `el-table` 上设置 `highlight-current-row` 属性为 `true`,开启高亮当前行功能;
2. 在 `el-table` 上设置 `row-class-name` 属性为一个函数,用于返回当前行的 class 名称;
3. 在返回的 class 名称中设置需要高亮的背景颜色。
示例代码如下:
```html
<template>
<el-table :data="tableData" highlight-current-row :row-class-name="rowClassName">
<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: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
};
},
methods: {
rowClassName({ row }) {
if (row.name === '张三') {
return 'highlight-row'; // 需要高亮的背景颜色在 highlight-row 类名中设置
}
return '';
},
},
};
</script>
<style>
.highlight-row {
background-color: #ffebe6; // 自定义高亮背景颜色
}
</style>
```
在上面的示例代码中,我们通过 `row-class-name` 属性指定一个函数 `rowClassName`,该函数会接收一个参数 `{ row }`,其中 `row` 表示当前行的数据。在函数中,我们判断如果当前行的姓名是张三,就返回 `highlight-row` 类名,这样就可以实现将张三所在的行高亮显示,同时我们在 CSS 中设置了 `highlight-row` 类名的背景颜色为 #ffebe6,即自定义了高亮颜色。
阅读全文