推荐用 formatter 函数或作用域插槽进行表格列格式化；computed 适合封装格式规则、缓存逻辑或预处理整列数据，但不宜直接返回格式化后的列数组以避免破坏 diff 优化。
直接用 computed 对表格列数据做格式化转换，其实并不推荐——因为 computed 是响应式派生值，它作用于整个数据源或字段集合，而不是单个单元格的渲染逻辑。真正适合表格列格式化的，是 formatter 函数 或 作用域插槽（v-slot:default）。但 computed 可以在背后高效支撑这些格式化逻辑，比如统一管理格式化规则、缓存处理结果、或预处理原始数据。
用 computed 预处理一整列数据（适用于轻量、静态格式）
当某列格式规则固定（如“全部转大写”“统一加前缀”），且数据量不大时，可先用 computed 生成格式化后的新数组，再传给 el-table：
- 定义原始数据： const rawData = ref([{ name: 'alice', status: 'active' }, ...])
- 用 computed 派生格式化后的列表：
const formattedData = computed(() =>
rawData.value.map(item => ({
...item,
name: item.name.toUpperCase(),
status: item.status === 'active' ? '✅ 在线' : '❌ 离线'
}))
) - 表格绑定 :data="formattedData"，列直接用 prop="name" 即可
✅ 优点：一次计算、自动缓存；✅ 适合全表统一转换；❌ 缺点：无法按行差异化处理（如邮箱脱敏需依赖 row.id），也不支持异步或复杂上下文逻辑。
用 computed 封装 formatter 函数（推荐做法）
把 formatter 定义成 computed 属性，能利用其缓存能力避免重复创建函数实例，尤其适合含条件判断或复用逻辑的场景：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章