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组件接口也是适用的,但是加完expandedKeys,onExpand依然满足不了预期结果。
| 参数 | 说明 |
|---|---|
| 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>