UseRender - 渲染

组件介绍

UseRender 是基于 Vue3 封装的渲染组件，专为统一处理多类型内容渲染场景设计，支持字符串、数字、布尔、数组、对象、Vue 组件、VNode 等多种内容类型的自适应渲染，内置空值兜底、数组 / 对象格式化、样式自定义等能力，无需手动判断内容类型即可完成渲染，大幅简化多类型内容展示的业务代码。

核心能力

多类型内容自动识别渲染

内置智能类型判断逻辑，自动识别 String/Number/Boolean/Array/Object/Vue 组件/VNode 七种内容类型并采用对应渲染策略，无需在模板中编写大量 v-if/v-else 分支判断内容类型，一个组件覆盖绝大多数内容渲染场景。

智能数组与对象格式化

针对数组和对象类型内容提供标准化格式化能力：普通数组支持自定义分隔符拼接为字符串，对象数组支持自动提取指定主键值后拼接，纯对象支持提取指定字段值展示，内置默认解析键（label）和分隔符（、），无需额外处理即可满足字典值、标签列表等常见场景的渲染需求。

空值统一兜底处理

内置空值检测逻辑，当内容为 null/undefined/空字符串/空数组/空对象时自动展示统一的占位符（默认为「—」），支持自定义空值展示文本，解决不同页面空值展示不统一的问题，避免页面出现空白或 undefined 等异常展示。

Vue 组件动态渲染

支持直接传入 Vue 组件对象（包含 render 函数或 setup 函数的同步/异步组件）进行动态渲染，无需提前注册组件即可实现单元格内渲染复杂交互组件的需求，特别适合表格列中渲染操作按钮、状态标签、进度条等复杂组件的场景。

VNode 原生支持

完整支持 VNode（虚拟节点）类型内容直接渲染，可与 h 函数、JSX 无缝配合使用，支持渲染通过 createVNode/h 函数创建的虚拟节点，满足高度自定义的复杂内容渲染需求，兼顾灵活性与易用性。

自定义样式透传

支持传入自定义 class 类名和内联 style 样式，样式仅作用于文本内容和数组/对象渲染的容器，不影响组件类型内容的样式隔离，方便业务侧根据需求自定义文本颜色、大小、对齐方式等样式，无需额外包裹容器元素。

HTML 内容原生渲染

针对字符串类型内容内置 v-html 渲染能力，支持直接渲染包含 HTML 标签的富文本内容，无需额外使用 v-html 指令即可展示后端返回的富文本、高亮文本等内容，同时保留 XSS 防护能力（由 Vue 框架层面保障）。

友好的类型错误提示

当传入不支持的内容类型时，会以红色错误提示明确告知支持的类型范围，帮助开发者快速定位问题，避免页面白屏或静默失败，提升开发体验和问题排查效率。

使用

UseRender

Props

import { type PropType } from 'vue'
import type { RenderContent } from '@/types'

/**
 * 组件props
 */
export default {
  /**
   * 渲染内容 必传
   */
  content: {
    type: [String, Number, Boolean, Array, Object] as PropType<RenderContent>,
    required: true
  },
  /**
   * content为Array类型时转为字符串的分隔符 默认、
   */
  separator: {
    type: String,
    default: '、'
  },
  /**
   * content为对象数组或对象时需要转为字符串的key 默认label
   */
  parseKey: {
    type: String,
    default: 'label'
  },
  /**
   * 当content为空时展示的文本 默认—
   */
  emptyText: {
    type: String,
    default: '—'
  },
  /**
   * 样式类名 仅TextContent和ArrayContent有效
   */
  class: {
    type: String,
    default: ''
  },
  /**
   * 内联样式 仅TextContent和ArrayContent有效
   */
  style: {
    type: [String, Object] as PropType<string | Record<string, any>>,
    default: ''
  }
}

Types

import type { ExtractPropTypes } from 'vue'
import componentProps from './props'

/**
 * props类型
 */
export type Props = ExtractPropTypes<typeof componentProps>

UseRender - 渲染 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

Types ​

UseRender - 渲染

组件介绍

核心能力

使用

Props

Types