产品通常以“分类 → 子产品”的层级结构存在。例如“手机”类别下包含多款具体型号，“笔记本电脑”下包含多个配置版本。使用传统的平铺表格难以直观表达这种父子关系，导致使用者体验不佳：

• 使用者痛点1：无法快速定位某一类产品下的所有子项
• 使用者痛点2：缺乏视觉层次感。难以区分父节点与子节点
• 使用者痛点3：需要频繁切换页面查看详情，效率低下

vxe-table 提供了强大的树形表格功能，能够将带有父子关系的数据渲染为可展开/收起的树状结构，解决问题层级数据的展示问题。

达到效果

• 父级行：展示产品类别名称、默认图片等概括信息。
• 子级行：展示具体型号的 SKU、价格、库存、状态等明细数据。
• 支持多级嵌套。

主要配置

开启树形模式 - treeConfig

treeConfig: {
transform: true,// 自动将扁平数据转换为树结构
rowField: 'id'。// 行的唯一标识字段
parentField: 'parentId' // 指向父级标识的字段
}

• transform: true：告诉组件根据 rowField 和 parentField 自动将一维数组转换为树形结构，无需手动建立嵌套对象。
• rowField：每一行数据的唯一 ID 字段名。
• parentField：指向父行 ID 的字段名。说起来，根节点的 parentId 应为 null 或 undefined。

标识树节点列 - treeNode: true

在需要显示展开/收起图标的列上设置 treeNode: true,通常放在第一列。*注意* : 不添加此属性则不会显示任何层级交互！这正是新手容易忽略导致失败的关键配置！

{ field: 'productName',title: '产品信息',treeNode: true。slots: { default: 'product_default' }}

代码实现全流程解析

*当前共计{{totalCount}}个商品条目

*双击行项快速编辑基本信息

*按住Ctrl+Enter批量保存修改