Vue Element 表格根据值改变行颜色教程

在 Vue 中使用 Element 表格，可以通过自定义列的样式来实现根据值变颜色的效果。

首先，在表格的列定义中，可以使用formatter属性来格式化单元格的内容，并返回带有特定样式的 HTML 字符串。例如，可以根据某个字段的值来设置不同的颜色：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="score" label="分数" :formatter="formatScore"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', score: 80 },
        { name: '小红', score: 90 },
        { name: '小刚', score: 70 },
      ],
    };
  },
  methods: {
    formatScore(row) {
      // 根据分数设置不同的颜色
      if (row.score >= 90) {
        return `<span style='color: green;'>${row.score}</span>`;
      } else if (row.score >= 80) {
        return `<span style='color: orange;'>${row.score}</span>`;
      } else {
        return `<span style='color: red;'>${row.score}</span>`;
      }
    },
  },
};
</script>

上述代码中，formatScore方法根据row.score的值返回不同的 HTML 字符串，通过设置span元素的style属性来改变文字的颜色。

这样，当表格渲染时，分数列的内容就会根据分数的不同而显示不同的颜色。

注意：在使用formatter属性时，需要通过v-html指令来渲染 HTML 内容，即将表格列的formatter属性改为:formatter="formatScore"，并在对应的列上添加v-html指令：

<el-table-column prop="score" label="分数" :formatter="formatScore" v-html="formatScore"></el-table-column>

这样才能正确地解析 HTML 字符串并渲染到表格中。