<p>{/'template/':/'<template>/n  &lt;el-table :data=/'tableData/'&gt;/n    &lt;el-table-column prop=/'name/' label=/'姓名/' :cell-class-name=/'highlightYellow/'&gt;</el-table-column>/n    &lt;el-table-column prop=/'age/' label=/'年龄/'&gt;</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>
Element UI el-table 单元格高亮特定字符 - 使用 cell-class-name 属性

原文地址: https://www.cveoy.top/t/topic/qfDN 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录