Sz-admin框架之Vue 3 Render 函数使

type

status

date

slug

summary

为什么需要 Render 函数？

在 Vue 开发中，我们通常使用模板(template)来描述 UI。但在某些场景下（特别是表格列定义中），我们无法直接在 template 中使用组件，原因如下：

表格列定义是 JavaScript 对象：Element Plus 的 ElTableColumn 配置是纯 JavaScript 对象，不是模板的一部分

动态渲染需求：需要根据当前行数据动态决定渲染什么内容

作用域限制：模板中无法直接访问表格的当前行数据(scope)

这就是为什么文档中提到"组件显示不想在 template 使用 el-image 等组件可以在 render 实现"。

Render 函数核心原理

Vue 3 使用 h 函数（Hyperscript 的缩写）来创建虚拟 DOM 节点。h 是 Vue 渲染函数的核心 API，它允许我们在 JavaScript 中描述 UI。

基本语法：

type: 组件构造函数或 HTML 标签名

props: 组件的 props 或 HTML 属性

children: 子节点内容（字符串、数组或其他 VNode）

代码详细解析

关键点解析：

scope 参数:

在表格渲染函数中，scope 是一个包含当前行数据的对象

scope.row 访问当前行的完整数据对象

scope.row.labelImageUrl 获取当前行的图片 URL

h 函数调用:

第一个参数 ElAvatar 是要渲染的组件

第二个参数是组件的 props 对象，与模板中使用的属性相同

没有第三个参数（children），因为 ElAvatar 通常不需要子内容

为什么这里使用 Render 而不是模板？

在 ElTable 中，如果你尝试在 template 中直接使用 ElAvatar：

这不会工作，因为 <el-table-column> 的默认插槽会被当作静态内容渲染，无法访问当前行数据 row。

而使用 render 函数，我们可以在 JavaScript 上下文中直接访问 scope.row，实现动态渲染。

更复杂的 Render 示例

如果你需要渲染多个组件或有条件渲染，可以这样：

最佳实践与注意事项

类型安全：在 TypeScript 项目中，建议定义 scope 类型

性能考虑：避免在 render 函数中执行复杂计算或创建新函数

替代方案：Vue 3 中也可以使用作用域插槽实现类似功能

但 render 函数在某些复杂场景下更简洁高效，特别是在动态创建多个组件时。

函数式组件：对于更复杂的渲染逻辑，考虑将 render 函数提取为独立的函数式组件