在开发表格组件时，我们经常需要完成两个任务：格式化原始数据（如数字千分位、日期格式化）和自定义单元格样式（如根据数值显示不同颜色、添加后缀）。
vxe-table 提供了 formatter 和 cell-render 两个配置项，二者可以组合使用，让数据逻辑与展示样式分离，达到更灵活的配置效果。
本文通过一个金额列的示例，演示如何同时使用 formatter 对数字添加千分位分隔符，再通过自定义渲染器 cell-render 将格式化后的内容渲染为红色并加上"元"后缀。
效果预览
- 金额列会显示为：
- 原始数据：1000 → 展示 1,000元（红色）
- 原始数据：254400000 → 展示 254,400,000元（红色）
代码
定义渲染器
1.1 首先需要使用 VxeUI.renderer.add 注册一个渲染器，渲染器内部引用一个 Vue 组件（DemoCellStyle.vue），该组件负责最终单元格的样式呈现。
注册渲染器 (renderer.js)
javascript
import { VxeUI } from 'vxe-pc-ui'
import DemoCellStyle from './DemoCellStyle.vue'
// 创建单元格样式渲染器
VxeUI.renderer.add('MyTableCellStyle', {
// 默认显示模板
renderTableDefault(renderOpts, renderParams) {
return <DemoCellStyle render-params={renderParams} />
}
})2.1 编写渲染器组件 DemoCellStyle.vue
该组件通过 renderParams 获取当前单元格的上下文，并调用 $table.getCellLabel(row, column) 来获取 经过 formatter 处理后的文本内容，然后将其包裹在自定义样式中。
html
<template>
<span style="color: red">{{ cellLabel }}元</span>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
renderParams: {
type: Object,
default: () => ({})
}
})
const cellLabel = computed(() => {
const { renderParams } = props
const { $table, row, column } = renderParams
if ($table && row && column) {
return $table.getCellLabel(row, column)
}
return ''
})
</script>- 关键点：$table.getCellLabel() 会优先执行列上配置的 formatter 函数，拿到格式化后的字符串，然后传给自定义渲染器。这样我们就实现了 formatter 负责数据格式化，cell-render 负责样式展示 的完美分工。
使用
- 在 vxe-grid 的列定义中：
- formatter：对原始数值添加千分位分隔符（例如 1000 → 1,000）。
- cellRender：指定使用上面注册的渲染器 'MyTableCellStyle'，该渲染器会将格式化后的文本加上"元"后缀并显示为红色。
html
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script lang="jsx" setup>
import { reactive } from 'vue'
import XEUtils from 'xe-utils'
const gridOptions = reactive({
border: true,
height: 300,
columns: [
{ type: 'seq', width: 50 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{
field: 'amount',
title: 'Amount',
// 数据格式化：千分位分隔
formatter({ cellValue }) {
return XEUtils.commafy(cellValue)
},
// 式渲染：使用自定义渲染器
cellRender: {
name: 'MyTableCellStyle'
}
}
],
data: [
{ id: 10001, name: 'Test1', sex: 'Man', age: 28, amount: 1000 },
{ id: 10002, name: 'Test2', sex: 'Women', age: 22, amount: 254400000 },
{ id: 10003, name: 'Test3', sex: 'Man', age: 32, amount: 999954 },
{ id: 10004, name: 'Test4', sex: 'Women', age: 23, amount: 10000000 }
]
})
</script>原理说明
| 配置项 | 职责 | 执行顺序 |
|---|---|---|
| formatter | 将原始数据转换为展示用的纯文本（如数字千分位、日期格式化） | 先执行 |
| cellRender | 接管整个单元格的渲染，可自定义任意 VNode 或组件 | 后执行，并可获取 formatter 的结果 |
两者组合时，cellRender 内部通过 $table.getCellLabel(row, column) 拿到已经经过 formatter 处理的文本，然后进行二次包装（加后缀、改颜色、加图标等）。这样既复用了 formatter 的格式化能力，又保留了渲染器的高度灵活性。
说明
- cellRender 会完全接管单元格内容：一旦配置了 cellRender，默认的文本渲染就会被覆盖，所以必须在自定义组件内显式调用 getCellLabel 来呈现格式化后的文本。
- 性能考虑：如果只是简单的样式修改（如颜色、字体），也可以直接使用 cellClassName 或 style 回调；但当需要组合复杂逻辑（如根据多列值、动态添加组件）时，cellRender 更加强大。
- 扩展性：通过注册不同的渲染器，可以在不同列或不同项目中复用样式逻辑。
这种模式非常适合需要统一格式化数据，但又希望在不同场景下呈现不同样式的业务需求（如金额、状态标签、进度条等）。