一、前言
在使用 Element Plus（或 Element UI）构建管理后台时，<el-table> 是最常见的组件之一。
无论是渲染列表、订单数据、监控日志、还是可视化报表，都离不开它。
但在复杂场景中，我们经常会遇到这样的需求：
- ✅ 只给某一列的单元格添加特殊颜色；
- ✅ 根据某个值动态调整字体或背景；
- ✅ 对特定条件的行或列设置警告样式；
- ✅ 自定义 hover 效果、边框或图标。
此时，cell-style 函数属性就是核心入口。
它能让我们对每一个单元格实现精确的样式控制。
二、基本原理概览
<el-table> 提供了几个与样式相关的函数钩子属性：
| 属性名 | 作用 | 返回类型 |
|---|---|---|
cell-style | 控制单元格样式 | 对象或函数返回对象 |
header-cell-style | 控制表头单元格样式 | 对象或函数返回对象 |
row-style | 控制整行样式 | 对象或函数返回对象 |
header-row-style | 控制表头整行样式 | 对象或函数返回对象 |
cell-class-name | 控制单元格 class 名称 | 函数返回字符串 |
cell-style 的调用机制：
cell-style({ row, column, rowIndex, columnIndex })返回一个对象形式的 CSS 样式：
return {
color: 'red',
backgroundColor: '#fef0f0',
fontWeight: 'bold'
}执行时机：
- 每次渲染表格时（初次或更新数据后）都会被触发；
- 每个单元格都会独立调用一次；
- 可根据 row/column 进行条件判断。
三、最小可运行示例
让我们从一个最小 Vue 示例开始。
示例1：基础用法
<template>
<el-table :data="tableData" :cell-style="setCellStyle" border style="width: 600px">
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="age" label="年龄" width="80" />
<el-table-column prop="score" label="成绩" width="100" />
</el-table>
</template>
<script setup>
import { ref } from 'vue'
const tableData = ref([
{ name: '张三', age: 18, score: 95 },
{ name: '李四', age: 22, score: 65 },
{ name: '王五', age: 25, score: 45 }
])
const setCellStyle = ({ row, column }) => {
if (column.property === 'score') {
if (row.score >= 90) {
return { backgroundColor: '#e1f3d8', color: '#67c23a' } // 优秀
} else if (row.score < 60) {
return { backgroundColor: '#fde2e2', color: '#f56c6c' } // 不及格
}
}
return {}
}
</script>🟢 运行效果：
- 当成绩 ≥ 90 时，单元格变绿色；
- 当成绩 < 60 时，单元格变红；
- 其他情况保持默认。
四、cell-style 的函数参数详解
Element Plus 源码中，cell-style 的回调参数如下：
{
row, // 当前行数据
column, // 当前列信息（含 prop、label 等）
rowIndex, // 当前行索引
columnIndex // 当前列索引
}参数说明表：
| 参数名 | 类型 | 说明 |
|---|---|---|
row | Object | 当前行的完整数据对象 |
column | Object | 当前列的配置信息（含 prop, label 等） |
rowIndex | Number | 当前行的序号（从0开始） |
columnIndex | Number | 当前列的序号（从0开始） |
应用场景举例：
column.property用来判断是哪一列；row.someField用来判断该行的状态；rowIndex可实现奇偶行样式；columnIndex可实现首列或末列特殊样式。
五、图解执行流程
以下是 el-table 渲染过程中 cell-style 的调用流程：
┌──────────────────────────────┐
│ 渲染 el-table │
└───────────────┬──────────────┘
│
▼
每列渲染 el-table-column
│
▼
渲染每个单元格 <td> 内容
│
▼
调用 cell-style({ row, column, rowIndex, columnIndex })
│
▼
返回 style 对象 → 绑定到 <td> 的 style 属性从源码角度看（简化版）：
const style = getCellStyle({
row,
column,
rowIndex,
columnIndex
})
<td :style="style"> ... </td>六、进阶实战：条件样式与动态计算
1️⃣ 条件样式 - 多列判断
const setCellStyle = ({ row, column }) => {
if (column.property === 'age' && row.age > 20) {
return { color: '#409EFF', fontWeight: 'bold' }
}
if (column.property === 'score' && row.score < 60) {
return { backgroundColor: '#fde2e2', color: '#f56c6c' }
}
}🟩 要点：
可通过 column.property 精确判断是哪一列。
2️⃣ 奇偶行差异
const setCellStyle = ({ rowIndex }) => {
if (rowIndex % 2 === 0) {
return { backgroundColor: '#fafafa' }
}
}可以搭配 row-style 做全行样式的统一控制。
3️⃣ 根据业务状态动态样式
假设我们有订单状态表：
<el-table :data="orders" :cell-style="orderCellStyle">
<el-table-column prop="orderId" label="订单号" />
<el-table-column prop="status" label="状态" />
</el-table>const orderCellStyle = ({ row, column }) => {
if (column.property === 'status') {
switch (row.status) {
case '已支付':
return { color: '#67c23a', fontWeight: 'bold' }
case '未支付':
return { color: '#e6a23c' }
case '已取消':
return { color: '#909399', textDecoration: 'line-through' }
}
}
}七、与 cell-class-name 的区别与配合
| 属性 | 返回类型 | 控制方式 | 使用场景 |
|---|---|---|---|
cell-style | 对象 | 直接设置样式（style） | 简单样式、动态计算颜色 |
cell-class-name | 字符串 | 添加 class 名称 | 复用 CSS class 样式、更灵活控制 |
例如：
<el-table :cell-class-name="cellClassName">
...
</el-table>const cellClassName = ({ column, row }) => {
if (column.property === 'status' && row.status === '异常') {
return 'danger-cell'
}
}.danger-cell {
background-color: #fde2e2 !important;
color: #f56c6c !important;
}✅ 推荐实践：
- 若样式为固定预定义样式，使用
cell-class-name - 若样式随数值变化（如渐变、动态颜色），使用
cell-style
八、复杂表格案例：多条件动态高亮
假设我们有一个销售数据表：
| 姓名 | 地区 | 销售额 | 完成率 |
|---|---|---|---|
| 张三 | 华东 | 120000 | 95% |
| 李四 | 华南 | 75000 | 70% |
| 王五 | 西北 | 35000 | 40% |
我们希望：
- 销售额低于 50000 → 红底；
- 完成率 > 90% → 绿色；
- 地区为 “华南” → 黄色高亮。
实现代码：
<template>
<el-table :data="sales" :cell-style="salesCellStyle" border>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="region" label="地区" />
<el-table-column prop="sales" label="销售额" />
<el-table-column prop="rate" label="完成率" />
</el-table>
</template>
<script setup>
import { ref } from 'vue'
const sales = ref([
{ name: '张三', region: '华东', sales: 120000, rate: 95 },
{ name: '李四', region: '华南', sales: 75000, rate: 70 },
{ name: '王五', region: '西北', sales: 35000, rate: 40 }
])
const salesCellStyle = ({ row, column }) => {
if (column.property === 'sales' && row.sales < 50000) {
return { backgroundColor: '#fde2e2', color: '#f56c6c' }
}
if (column.property === 'rate' && row.rate > 90) {
return { backgroundColor: '#e1f3d8', color: '#67c23a' }
}
if (column.property === 'region' && row.region === '华南') {
return { backgroundColor: '#fdf6ec', color: '#e6a23c' }
}
}
</script>九、结合动态主题与 CSS 变量
若你项目使用了 暗色模式/亮色模式切换，可以将样式与 CSS 变量结合。
:root {
--danger-bg: #fde2e2;
--danger-color: #f56c6c;
}
.dark {
--danger-bg: #5a3d3d;
--danger-color: #ff8c8c;
}const setCellStyle = ({ row, column }) => {
if (column.property === 'score' && row.score < 60) {
return {
backgroundColor: 'var(--danger-bg)',
color: 'var(--danger-color)'
}
}
}十、性能优化与注意事项
1️⃣ 尽量避免复杂计算
因为 cell-style 会在每次渲染时对每个单元格执行。
✅ 优化策略：
- 提前计算标记字段；
- 使用缓存或 computed 属性；
- 避免在函数内创建过多对象。
2️⃣ 合理使用 class 与 style 混合策略
对于大数据量表格（>5000行）：
- 优先使用
cell-class-name； cell-style仅用于少量动态样式。
3️⃣ 不推荐直接操作 DOM
不要在 cell-style 内使用 DOM API 或 $refs，这会破坏虚拟DOM渲染机制。
十一、工程实践总结
在企业级项目中，建议建立一个通用样式工具模块：
// table-style-utils.js
export const highlightByValue = ({ row, column, key, threshold, color }) => {
if (column.property === key && row[key] > threshold) {
return { color }
}
}然后在多个表格中复用：
<el-table :cell-style="(ctx) => highlightByValue({ ...ctx, key: 'score', threshold: 90, color: '#67c23a' })" />十二、结语
cell-style 虽小，却是 Element Plus 表格中最灵活的定制点之一。
通过本篇文章你已经学会：
- ✅ 理解
cell-style的底层执行机制； - ✅ 灵活应用参数进行条件判断；
- ✅ 区分
cell-style与cell-class-name； - ✅ 构建多条件动态样式逻辑；
- ✅ 实现工程化样式管理与优化。
📘 附录：完整工程模板下载结构
vue-el-table-style-demo/
├── src/
│ ├── App.vue
│ ├── components/
│ │ └── ScoreTable.vue
│ └── utils/
│ └── table-style-utils.js
├── package.json
└── vite.config.js其中 ScoreTable.vue 即本文的完整代码，可直接运行。
该示例完全兼容 Vue 3 + Element Plus。