Element表格单元格类名动态设置

在 Element UI 的 el-table 组件中，cell-class-name 属性用于动态自定义表格单元格的 CSS 类名，通常用于根据数据条件设置样式。

1. 基本用法

在 el-table 上绑定 :cell-class-name 属性，值为一个函数。该函数接收一个对象参数，返回字符串（类名）或数组（多个类名）。

<el-table 
  :data="tableData" 
  :cell-class-name="cellClassName"
>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

2. 函数参数说明

函数格式：({ row, column, rowIndex, columnIndex }) => className

• row: 当前行数据

• column: 当前列配置

• rowIndex: 行索引（从 0 开始）

• columnIndex: 列索引（从 0 开始）

3. 示例代码

根据数据条件添加类名

methods: {
  cellClassName({ row, column, rowIndex, columnIndex }) {
    // 针对特定列设置样式
    if (column.property === 'age') {
      if (row.age > 60) {
        return 'warning-cell'; // 年龄大于60添加警告样式
      }
    }

    // 针对特定行设置样式
    if (rowIndex === 0) {
      return 'first-row-cell'; // 第一行特殊样式
    }

    // 默认返回空
    return '';
  }
}

CSS 定义样式

.warning-cell {
  background-color: #fff6f7;
  color: #ff0000;
  font-weight: bold;
}

.first-row-cell {
  background-color: #f5f7fa;
}

4. 高级用法

返回多个类名

cellClassName({ row, column }) {
  const classes = [];
  if (row.status === 'error') {
    classes.push('error-cell');
  }
  if (column.property === 'name') {
    classes.push('bold-cell');
  }
  return classes; // 返回数组，如 ['error-cell', 'bold-cell']
}

结合列属性判断

cellClassName({ column }) {
  // 为表头是"操作"的列设置样式
  if (column.label === '操作') {
    return 'action-cell';
  }
}

5. 注意事项

1. 优先级问题：自定义类名会覆盖 Element 默认样式，必要时使用 !important。

2. 性能优化：避免在函数中执行复杂计算，特别是大数据表格。

3. 列标识：建议通过 column.property（对应 prop 值）或 column.label 识别列。

完整示例

<template>
  <el-table :data="tableData" :cell-class-name="cellClassName">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="status" label="状态"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, status: '正常' },
        { name: '李四', age: 70, status: '警告' }
      ]
    };
  },
  methods: {
    cellClassName({ row, column }) {
      // 年龄列且值大于60
      if (column.property === 'age' && row.age > 60) {
        return 'warning-cell';
      }
      
      // 状态列为"警告"
      if (column.property === 'status' && row.status === '警告') {
        return 'error-cell';
      }
    }
  }
};
</script>

<style>
.warning-cell {
  background: #fff8e6;
  color: #ff9900;
}
.error-cell {
  color: #ff0000;
  font-weight: bold;
}
</style>