el-table高亮显示某一行
时间: 2023-07-26 21:11:56 浏览: 150
要在element-ui的el-table中高亮显示某一行,可以使用row-class-name属性。具体来说,你可以通过设置该属性中的回调函数,来返回该行的class名称,从而实现高亮显示。
以下是一个简单的示例代码:
```
<template>
<el-table :data="tableData" row-class-name="highlight-row">
<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 },
{ name: '王五', age: 25 }
]
}
},
methods: {
highlightRow(row, index) {
if (row.name === '李四') {
return 'highlight'; // 返回highlight class名称
}
return ''; // 其他行不需要高亮
}
}
}
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
```
在上面的代码中,我们通过设置row-class-name属性,并指定其回调函数highlightRow来实现高亮某一行。在highlightRow函数中,我们根据条件判断返回highlight或空字符串来指定该行的class名称。最后在样式中定义.highlight类来实现高亮效果。
希望能帮到你!
阅读全文