el- table根据关键字高亮显示
时间: 2023-12-27 14:25:42 浏览: 82
el-table可以通过自定义列模板来实现根据关键字高亮显示。你可以使用slot-scope来访问每个单元格的数据,并使用v-html指令将匹配到的关键字用span标签包裹起来,并添加highlight类来设置高亮样式。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span v-html="highlightKeyword(scope.row.name)"></span>
</template>
</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: 25 },
{ name: '王五', age: 30 }
],
keyword: '张'
};
},
methods: {
highlightKeyword(text) {
return text.replace(new RegExp(this.keyword, 'gi'), '<span class="highlight">$&</span>');
}
}
};
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
```
在上面的代码中,我们使用了slot-scope来访问每个单元格的数据,并使用highlightKeyword方法来将匹配到的关键字用span标签包裹起来,并添加highlight类来设置高亮样式。你可以根据自己的需求修改关键字和样式。