vue 表格组件 vxe-table 渲染器：全局复用与局部渲染器的使用

vxe-table 提供了强大的渲染器（Renderer）机制，允许开发者自定义单元格的编辑与显示方式。渲染器既可以定义为局部渲染器（仅当前表格实例可用），也可以注册为全局渲染器（整个项目复用）。本文将详细介绍两种方式的使用方法、代码示例及注意事项。

渲染器是什么

• vxe-table 的渲染器（Renderer）用于把「某一类单元格怎么渲染」从列配置里抽出来：
  • 编辑态：renderTableEdit
  • 展示态：renderTableCell
  • 默认展示：renderTableDefault
  • 筛选：renderTableFilter

列里只需要写：

editRender: { name: 'MyInput' }

而不是每个列都写一遍 JSX / 组件。

局部渲染器：rendererConfig

局部渲染器通过表格配置项 rendererConfig 定义，仅在当前表格中生效。适合仅个别表格需要特殊渲染的场景。

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script lang="jsx" setup>
import { reactive } from 'vue'
import { VxeInput } from 'vxe-pc-ui'

const rendererConfig = {
  // 定义一个输入框渲染器
  myInput: {
    // 如果是输入框类型，可以设置为激活自动聚焦 class 或者 true
    tableAutoFocus: true,
    // 可编辑激活模板
    renderTableEdit(renderOpts, renderParams) {
      const { props = {} } = renderOpts
      const { row, column } = renderParams
      return <VxeInput v-model={row[column.field]} clearable={props.clearable} />
    },
    // 可编辑显示模板
    renderTableCell(renderOpts, renderParams) {
      const { row, column } = renderParams
      return <span>内容：{row[column.field]}</span>
    }
  }
}

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  rendererConfig,
  editConfig: {
    trigger: 'click',
    mode: 'cell'
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'name', title: 'Name', editRender: { name: 'myInput' } },
    { field: 'sex', title: 'Sex', editRender: { name: 'myInput', props: { clearable: true } } },
    { field: 'age', title: 'Age', editRender: { name: 'myInput', props: { clearable: true } } },
    { field: 'address', title: 'Address', editRender: { name: 'myInput' } }
  ],
  data: [
    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'x1111', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
    { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
  ]
})
</script>

渲染器 - 全局

全局渲染器通过 VxeUI.renderer.add 注册，注册后可在任意表格中复用，适合项目级通用组件。

定义一个编辑渲染器 src/renderer/myInput.jsx

import { VxeUI, VxeInput } from 'vxe-pc-ui'

// 创建一个金额输入渲染器
VxeUI.renderer.add('myInput', {
  // 如果是输入框类型，可以设置为激活自动聚焦 class 或者 true
  tableAutoFocus: true,
  // 可编辑激活模板
  renderTableEdit(renderOpts, renderParams) {
    const { props = {} } = renderOpts
    const { row, column } = renderParams
    return <VxeInput v-model={row[column.field]} clearable={props.clearable} />
  },
  // 可编辑显示模板
  renderTableCell(renderOpts, renderParams) {
    const { row, column } = renderParams
    return <span>内容：{row[column.field]}</span>
  }
})

在 main 引入

// ...
import 'src/renderer/myInput.jsx'
// ...

使用

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script lang="jsx" setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  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: { name: 'myInput' } },
    { field: 'num', title: 'Num', editRender: { name: 'myInput' }}
  ],
  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>

补充说明

特性	局部渲染器	全局渲染器
作用范围	仅当前表格实例	整个项目
定义方式	rendererConfig	VxeUI.renderer.add
复用性	低	高
适用场景	表格特有的渲染逻辑	通用编辑/显示组件

• JSX 支持：渲染器函数返回 JSX，需要项目配置支持 JSX（如 Vite + @vitejs/plugin-vue-jsx 或 Babel 插件）。
• 渲染器钩子：除 renderTableEdit 和 renderTableCell 外，vxe-table 还支持 renderTableHeader、renderTableFooter、renderDefault 等，可根据需要扩展。
• 传递 props：通过 editRender.props 传递自定义属性，在渲染函数中通过 renderOpts.props 获取。

通过合理使用局部与全局渲染器，可以大幅提升 vxe-table 的灵活性与代码复用率。希望本文能帮助你更好地掌握这一特性。

vxetable.cn