在开发后台管理系统时表格中的金额字段往往需要特殊的展示和编辑方式例如右对齐、保留两位小数、带货币符号前缀等。vxe-table 的自定义渲染器Renderer 机制允许我们将任何 Vue 组件嵌入到表格单元格中实现高度定制化的交互体验。一、什么是渲染器渲染器是 vxe-table 中用于控制单元格如何渲染和交互的核心机制。它主要解决两类问题场景说明展示模式只读单元格以什么样式显示数据例如金额加“”前缀、状态标签加颜色等编辑模式可编辑单元格激活编辑时使用什么组件来输入/选择数据例如输入框、下拉选择器、日期选择器等通过自定义渲染器你可以将任意 Vue 组件嵌入表格单元格实现表单控件与表格的无缝融合。二、实现步骤第 1 步创建控件组件首先创建一个 Vue 组件来实现金额输入的逻辑。命名随意这里以 DemoEditAmount.vue 为例。组件内部可以使用任意 UI 库的组件如 Element Plus等这里使用 vxe-table 自带的 vxe-number-input。templatevxe-number-inputv-ifcurrRow currColumnv-modelcurrRow[currColumn.field]typefloatdigits2prefix-iconvxe-icon-rmbalignright/vxe-number-input/templatescriptsetupimport{ref}fromvueconstpropsdefineProps({renderParams:{type:Object,default:()({})}})constcurrColumnref()constcurrRowref()constload(){const{renderParams}propsconst{row,column}renderParams currRow.valuerow currColumn.valuecolumn}load()/script关键点组件通过 renderParams 接收当前行的数据row和列配置column。通过 v-model“currRow[currColumn.field]” 实现双向绑定修改会自动同步到表格数据源。第 2 步注册渲染器在 main.js 引入 VxeUI.renderer.add 注册自定义渲染器。import{VxeUI}fromvxe-tableimportDemoEditAmountfrom./DemoEditAmount.vue// 创建一个金额输入渲染器VxeUI.renderer.add(MyTableEditAmount,{// 如果是输入框类型可以设置为激活自动聚焦 classtableAutoFocus:input,// 金额右对齐tableCellAlign:right,// 可编辑激活模板renderTableEdit(renderOpts,renderParams){returnDemoEditAmount render-params{renderParams}/},// 可编辑显示模板renderTableCell(renderOpts,renderParams){const{row,column}renderParamsreturnspan{row[column.field]}/span}})配置项说明属性类型说明tableAutoFocusstring编辑激活时自动聚焦的选择器如 ‘input’tableCellAlignstring单元格内容对齐方式‘left’、‘center’、‘right’renderTableEditfunction编辑模式下的渲染函数返回 Vue 组件renderTableCellfunction只读模式下的渲染函数返回展示内容注意渲染器的实现需要 JSX/TSX 环境支持请确保项目已配置相关编译工具。开始使用templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptlangjsxsetupimport{reactive}fromvueconstamountEditRenderreactive({name:MyTableEditAmount})constnumEditRenderreactive({name:MyTableEditAmount})constgridOptionsreactive({border:true,showOverflow:true,height:300,editConfig:{trigger:click,mode:cell},columns:[{type:seq,width:50},{field:name,title:name},{field:amount,title:Amount,editRender:amountEditRender},{field:num,title:Num,editRender:numEditRender}],data:[{id:10001,name:Test1,amount:65,num:28},{id:10002,name:Test2,amount:31,num:22},{id:10003,name:Test3,amount:20,num:32},{id:10004,name:Test4,amount:12,num:23}]})/script通过自定义渲染器vxe-table 的单元格渲染能力得到了极大扩展展示灵活可以渲染任意 HTML 或 Vue 组件。编辑强大支持嵌入任意表单控件实现复杂交互。复用便捷一次注册多列复用。本文以金额输入控件为例完整演示了从组件创建、渲染器注册到表格使用的全流程。下一期我们将探讨更复杂的渲染器场景——例如带校验、联动、异步数据等高级功能。https://vxetable.cn