el-table中单元格的内容 只对特定字符添加黄色背景
您可以使用 el-table 的 cell-class-name 属性来为特定字符添加黄色背景色。具体步骤如下:
- 在 el-table 中的每个单元格上,使用
cell-class-name属性绑定一个方法,该方法用于返回单元格的类名。 - 在该方法中,判断单元格的内容是否包含特定字符,如果包含,则返回一个包含黄色背景色的类名,否则返回空字符串。
下面是一个示例代码:
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" :cell-class-name="highlightYellow"></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 },
{ name: '赵六', age: 35 }
],
highlightChar: '李' // 需要添加黄色背景的特定字符
};
},
methods: {
highlightYellow({ row, column, rowIndex, columnIndex }) {
const cellData = row[column.property];
if (cellData.includes(this.highlightChar)) {
return 'highlight-yellow'; // 返回包含黄色背景的类名
} else {
return ''; // 返回空字符串,不添加额外的类名
}
}
}
};
</script>
<style scoped>
.highlight-yellow {
background-color: yellow;
}
</style>
在上面的代码中,我们使用了 highlight-yellow 类名来表示黄色背景色。您可以根据需要自定义该类名,并在样式中设置对应的背景色
原文地址: https://www.cveoy.top/t/topic/iysa 著作权归作者所有。请勿转载和采集!