您可以使用 el-table 的 cell-class-name 属性来为特定字符添加黄色背景色。具体步骤如下:

  1. 在 el-table 中的每个单元格上,使用 cell-class-name 属性绑定一个方法,该方法用于返回单元格的类名。
  2. 在该方法中,判断单元格的内容是否包含特定字符,如果包含,则返回一个包含黄色背景色的类名,否则返回空字符串。

下面是一个示例代码:

<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 类名来表示黄色背景色。您可以根据需要自定义该类名,并在样式中设置对应的背景色

el-table中单元格的内容 只对特定字符添加黄色背景

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

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