Teek Design Vue3

主题

Teeker2025-07-17
877
3.4m

表格渲染 ​

单元格有 4 种自定义方式渲染：

  • render：完全自定义单元格整体渲染，支持 h 函数、jsx/tsx
  • renderHTML：返回 HTML 字符串渲染单元格
  • slots：根据配置项的 prop 生成对应的单元格插槽，生成规则为 {prop}，和 render 函数功能一致
  • formatValue：通过 formatter 函数对单元格数据进行格式化

表头有 3 种自定义方式进行渲染：

  • render：完全自定义表头整体渲染，支持 h 函数、jsx/tsx
  • renderHTML：返回 HTML 字符串渲染表头
  • slots：根据配置项的 prop 生成对应的表头插槽，生成规则为 {prop}-header，与 render 函数功能一致

如果同时存在多个方式，只生效一个，优先级从高到低（单元格和表头同理）。

除此之外，Teek 内置了部分常用的单元格组件，通过 el 配置组件名称。

单元格组件 ​

通过在 columns 中配置 el 属性，可以使用内置的组件渲染单元格数据。

通过 elProps 配置对应 el 属性对应的组件 Props 属性。

通过 elSlots 配置对应 el 属性对应的组件 Slots 属性。

自定义单元格渲染（render） ​

通过在单个 column 中配置 render 属性，返回 VNode 或 string 来自定义单元格渲染。

这里演示通过 h 函数创建 VNode。

自定义单元格渲染（jsx/tsx） ​

除了 h 函数，你还可以使用 jsx 或 tsx 自定义单元格渲染。

警告

使用 jsx 或 tsx 时，请在 script 上将 lang=ts 改为 lang=tsx。

html
<script setup lang="tsx">
禁用

自定义单元格渲染（renderHtml） ​

如果你只想对内容进行替换，可以使用 renderHtml 属性返回一个可信的 HTML 字符串。

自定义单元格渲染（插槽） ​

Teek 会将单个 column 的 prop 属性生成插槽，因此你也可以使用插槽自定义单元格渲染。

生成插槽的规则为当前 prop 的值，假设一个 column 的 prop 为 username，那么插槽为 username。

0%

自定义单元格渲染（formatValue） ​

如果你只想对内容进行格式化，如添加一些前缀或者后缀内容，可以使用 formatValue 配置项。

自定义表头渲染（renderHeader） ​

通过在单个 column 中配置 renderHeader 属性，返回 VNode 或 string 来自定义表头渲染。

自定义表头渲染（jsx/tsx） ​

除了 h 函数，你还可以使用 jsx 或 tsx 自定义表头渲染。

警告

使用 jsx 或 tsx 时，请在 script 上将 lang=ts 改为 lang=tsx。

html
<script setup lang="tsx">

自定义表头渲染（renderHeaderHTML） ​

如果你只想对内容进行替换，可以使用 renderHeaderHTML 属性返回一个可信的 HTML 字符串进行表头内容渲染。

自定义表头渲染（插槽） ​

Teek 会将单个 column 的 prop 属性根据规则生成表头插槽，因此你也可以使用表头插槽自定义表头渲染。

生成插槽的规则为当前 prop 的值 + -header，假设一个 column 的 prop 为 username，那么表头插槽为 username-header。

除了使用 prop 生成插槽，Teek 还提供了 header-before 和 header-after 两个 全局 表头插槽，分别在表头插槽之前和之后插入内容。