Ant Design Vue组件Tree懒加载刷新后如何清空已加载节点

536 阅读1分钟

Tree 树形控件

问题:使用Tree树形控件,loadData懒加载数据,由于项目需要加个搜索条件,会刷新treeData,第一次进入页面显示是正常的,当点击加载loadData数据之后,再点击搜索接口更新treeData时,Tree显示的数据接口就出现问题,之前点击加载的loadData数据的父节点是一个展开的状态且没有搜索图标,与预期结果不一致。

出现问题代码(此代码在没有添加搜索添加时是满足项目需求):

<Tree
   selectedKeys={selectedKeysList.value}
   blockNode
   treeData={(pageInfo.list || []) as Array<any>}
   loadData={onLoadData}
   fieldNames={__fieldNames}
   onSelect={onSelect}>
</Tree>

在此之前修改过table里面的树形结构,使用的是expandedRowKeys控制展开的子节点,当接口刷新时清空expandedRowKeys可以解决父节点搜索问题。使用类比的思想,我觉得Tree组件接口也是适用的,但是加完expandedKeysonExpand依然满足不了预期结果。

参数说明
expandedKeys(v-model)受控)展开指定的树节点
expand展开/收起节点时触发
loadData异步加载数据
loadedKeys(受控)已经加载的节点,需要配合 loadData 使用

出现此问题是因为使用loadData懒加载数据,并没有使用loadedKeys,导致刷新接口的时候loadedKeys加载的节点并没有清除,导致父节点是展开状态。所以使用loadData时,一定要使用loadedKeys,避免出现Bug,真的是体会到一个Bug改一天是啥滋味了😭。

<Tree
   selectedKeys={selectedKeysList.value}
   expandedKeys={expandedKeys.value}
   blockNode
   treeData={(pageInfo.list || []) as Array<any>}
   loadData={onLoadData}
   loadedKeys={loadedKeys.value}
   fieldNames={__fieldNames}
   onExpand={onExpand}
   onSelect={onSelect}>
</Tree>

💕你所看到的惊艳,都曾被平庸历练