Table 表格 - 动态列渲染

在很多业务场景中，表格的列配置并不是预先定义好的，而是根据业务逻辑或后端接口动态生成的。本章将展示如何结合响应式 API 实现灵活的动态列渲染。

异步接口获取列

最常见的场景是进入页面后，先调用接口获取用户的个性化列配置，然后再渲染表格。

姓名

张三

李四

异步加载列配置

混用模式（固定 + 动态）

在复杂的后台管理系统中，通常会将“选择框”、“ID”、“操作栏”作为固定列写死在前端，而中间的业务数据列依据接口动态排列。

	ID

	101
	102

固定列 + 动态多级表头

动态生成多级表头

有时我们需要根据后端返回的结构化数据（如年份、季度列表）在前端循环生成复杂的嵌套表头。

循环生成的嵌套表头

横向维度渲染（透视）

横向渲染通常用于展示“时间轴”或“动态属性”。后端返回一系列维度（如日期列表），前端根据这些维度动态生成列，并配合数据对象中对应的动态 Key 进行展示。

区域

华东区

华北区

横向时间维度渲染

纵向数据渲染（转置）

纵向渲染主要用于显示单条记录的详细信息。通过将对象的 Key-Value 转换为表格的 Row-Column 结构，可以在表格布局下实现类似“详情卡片”的效果。

用户 ID	U001
用户昵称	程序员小王
联系邮箱	wang@example.com
会员等级	VIP

纵向属性视图

最佳实践建议

1. Skeleton 骨架屏：在异步获取列配置期间，建议使用骨架屏占位，避免表格结构跳动。
2. Key 管理：当动态改变 columns 数组时，如果遇到渲染不更新的情况，可以尝试给 yh-table 绑定一个基于列配置生成的 key。
3. 固定列冲突：请确保动态生成的列中 fixed 属性与前端写死的固定列顺序逻辑一致，避免出现固定列被夹在中间的情况。