HZERO值集视图升级！优化树形结构，支持分页、懒加载和自定义根节点查询参数！

引言

我们平台团队一直在努力增强各种更易用、性能更好的组件，帮助企业用户获得更好的操作体验和满足不同的业务需求。

为了帮助企业用户更好地处理值集视图组件在面对数据量过大、根节点查询参数无法自定义等挑战，提高用户体验，我们HZERO平台对值集视图的树形配置做了升级调整，现在可支持分页加载、懒加载、自定义根节点查询参数配置。

接下来将为大家详细讲解如何在HZERO平台上快速配置树形值集的具体操作步骤，帮助您高效完成相关配置。

01 配置一个基础的树形值集

步骤一：准备一个符合树形规则的值集

1. 进入到开发管理 > 值集配置菜单。
2. 选择或定义一个树形值集，我这里选择一个预先准备好的值集。

3. 这个值集返回的树节点基本数据结构是这样的，拥有关联平铺数据树形结构关键的 id 字段（appMenuId）和父级指向字段（parentMenuId）。

// 根节点
{
"appMenuId": 0, // id 字段}
// 子节点
{ 
"parentMenuId": 0, 
// 父级指向，根节点则不需要该字段 
"appMenuId": 1, // id 字段
}

注意事项：

• 值集分为独立值集、SQL 值集和 URL 值集，独立值集无法配置懒加载。

步骤二：在值集视图构建树形配置

// 根节点
{
"appMenuId": 0, // id 字段
}
// 子节点
{ 
"parentMenuId": 0, // 父级指向，根节点则不需要该字段 
"appMenuId": 1, // id 字段
}

1. 图中区域 ① 的值字段名除了关联值字段外，树形值集中它还是用于关联树形结构的 id 字段 名， 对应数据示例的 appMenuId 字段。
2. 图中区域 ② 的值集需要关联上我们在步骤一中定义的树形值集。
3. 我们需要配置图中区域 ③ 的父字段名，对应数据示例的 parentMenuId 字段，用于树形结构中的父子级关联，并且它也是开启树形值集的开关。
4. 在全量加载时，即区域 ④ 的懒加载禁用时，可以启用区域 ⑤ 的默认展开配置，树节点将会默认全部展开。

步骤三：预览配置好的树形值集

通过以上两大步我们就配置好一个基本的树形值集啦，我们可以通过值集视图的 【预览】 按钮直接查看效果。

02 配置根节点查询参数、子节点懒加载和分页

步骤四：配置根节点查询参数

在此之前树形值集根节点查询时不带标识参数，如果需要自定义根节点查询参数，则需要自行在前端代码中实现，增加了开发负担，也反映出值集视图配置的能力仍有提升空间。

1. 我们现在支持通过父字段名配置成表达式的方式自定义根节点查询参数，如：我们可以把这里的父字段名配置成 parentMenuId=root，在根节点查询时就会带上 parentMenuId=root 的参数，使用起来更加便捷高效。

2. 通过点击 【预览】 按钮后可以从网络请求看到，查询根节点的接口就会携带我们指定的参数啦！

步骤五：配置树形懒加载

关联的值集本身需要支持懒加载。

1. 我们启用图中区域 ① 的懒加载配置，这个配置会自动应用到前端组件，启用组件的懒加载功能。
2. 启用懒加载后图中区域 ② 的默认展开配置会被禁用，因为懒加载是通过展开行为触发的，如果在此基础上默认展开所有节点，则会触发多次查询。
3. 调整完成后我们点击保存，点击 【预览】 按钮查看效果。

4. 我们任意点击一行的展开图标，会发起携带父字段名作为参数的接口请求，查询并懒加载子节点数据。

步骤六：配置子节点分页查询

值集配置开启分页且懒加载启用时，子节点也会根据值集视图配置的分页大小进行分页查询，当子节点数据超过一页时，可以通过点击 【更多】 按钮查询下一页数据。

注意事项：

• 前端版本要求： choerodon-ui@1.6.7-alpha.12； hzero-front 和 hzero-front-hpfm 均需 1.10.x 及以上版本。
• 懒加载禁用时，则会自动关闭分页，全量返回值集数据，并且优先级高于值集的是否分页配置。

根据以上步骤，我相信您能很快学会如何配置并在项目中快速应用树形值集啦，快来试试吧！

最后

我们将持续优化增强值集组件，优化客户体验。如果你有更好的想法和建议，欢迎您积极反馈给我们！

• 值集配置：https://open.hand-china.com/publish-center/comp/detail/163/ve...
• 值集视图配置：https://open.hand-china.com/publish-center/comp/detail/163/ve...
• Lov：https://open.hand-china.com/choerodon-ui/zh/tutorials/lov

联系我们

1. 立即预约，免费演示 👉 获取产品演示
2. 了解HZEROJS的详细功能，请查阅我们的文档：
   HZEROJS 功能文档
3. 如果您有疑问或建议，可以通过开放平台进行工单反馈，问题分类请选择【前端组件库 -> HZEROJS】： 汉得焱牛开放平台
4. 相关咨询或更多信息，欢迎联系我们：
   邮箱：[e-mail]