element ui table 根据某个字段的状态 调整整行的文字颜色

Element UI 的 Table 组件允许你在表格中动态地根据数据的状态改变单元格的颜色。这通常通过 `cell-class-name` 或者 `row-class-name` 属性配合 Vue.js 的计算属性或者条件渲染来实现。下面是一个简单的例子：

<el-table :data="tableData" :cell-class-name="customCellStyle">
  <el-table-column prop="status" label="状态"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, status: 'success' },
        { id: 2, status: 'warning' },
        { id: 3, status: 'danger' }
      ],
      customCellStyle: (row, column) => {
        switch (column.prop) {
          case 'status':
            if (row.status === 'success') {
              return 'text-success'; // 使用 Element UI 提供的 CSS 类名
            } else if (row.status === 'warning') {
              return 'text-warning';
            } else if (row.status === 'danger') {
              return 'text-danger';
            }
            break;
        }
        // 如果状态未知，返回默认样式
        return '';
      }
    };
  }
};
</script>

在这个示例中，`customCellStyle` 函数接收当前行 (`row`) 和列 (`column`) 作为参数，根据 `status` 字段的值决定应用哪种颜色的 CSS 类。