Element UI el-table 单元格高亮特定字符 - 使用 cell-class-name 属性
<p>{/'template/':/'<template>/n <el-table :data=/'tableData/'>/n <el-table-column prop=/'name/' label=/'姓名/' :cell-class-name=/'highlightYellow/'></el-table-column>/n <el-table-column prop=/'age/' label=/'年龄/'></el-table-column>/n </el-table>/n</template>/',/'script/':/'<script>/nexport default {/n data() {/n return {/n tableData: [/n { name: '张三', age: 20 },/n { name: '李四', age: 25 },/n { name: '王五', age: 30 },/n { name: '赵六', age: 35 }/n ],/n highlightChar: '李' // 需要添加黄色背景的特定字符/n };/n },/n methods: {/n highlightYellow({ row, column, rowIndex, columnIndex }) {/n const cellData = row[column.property];/n if (cellData.includes(this.highlightChar)) {/n return 'highlight-yellow'; // 返回包含黄色背景的类名/n } else {/n return ''; // 返回空字符串,不添加额外的类名/n }/n }/n }/n};/n</script>/',/'style/':/'<style scoped>/n.highlight-yellow {/n background-color: yellow;/n}/n</style>/</p>
原文地址: https://www.cveoy.top/t/topic/qfDN 著作权归作者所有。请勿转载和采集!