标签：antdv 展示 穿梭 树形 搜索 两棵树 右侧 节点

本文地址：https://www.cnblogs.com/veinyin/p/14340241.html

 

不适用多级树状穿梭框，本文基于两层树实现，全文没有代码，只有思路，如果有更好的实现方式，欢迎留言

一、需求：

1. 穿梭框左右侧均为省市树（只有两个层级），支持搜索

2. 某城市从左侧移到右侧后，左侧不再展示该城市

3. 移动省下部分城市，左右侧这个省都要作为父节点展示

 

左右两侧都有湖北这个父节点，武汉、黄石、十堰已移到右侧，左侧不再展示

 

 

二、技术方案

优先选择框架已有组件，查看 antdv 示例，效果如下

 

 

根据示例可知，穿梭框列表可以自定义，通过插槽展示，未做树搜索，要测试一下自带的能不能用

在示例代码上测试，发现树的展示数据需要前端维护， Transfer 搜索只能搜索最外层，无法搜索子节点，也需要前端实现

因此需要实现的内容包括：左右两棵树的展示，树的搜索过滤，移动之后的节点处理（隐藏、展示、父节点的处理）

 

三、实现细节

通过接口获取左右两棵树的原始数据后，就要考虑展示问题了。

1. 子节点移动之后如何剔除

2. 对一个父节点来说，移动是否还有子节点，是否需要剔除父节点，甚至右侧移动过来的节点如何插到父节点下，是否需要新增父节点

3. 搜索，如果匹配到父节点，子节点是否保留，匹配子节点后，剔除空的父节点

4. 左右都移动之后的搜索怎么展示

...等等交互

 

因为是通过插槽控制穿梭框左右两侧的展示内容，这两棵树几乎完全可以由前端控制

 

对穿梭框，需要记录移到右侧的项：

1. targetKeys - 记录右侧的所有 key，只有编码 list

2. targetList - 包括每一项详细信息的 list

 

对左右两棵树，都需要这些字段：

1. keyword - 搜索关键字

2. showData - 最终用于展示的数据

3. originalData - 原始数据

4. checkedKeys - 树中勾选项

5. expandedKeys - 树中展开的父节点

 

考虑到只有两层，可以先将左右两棵树拍平，合并得到 totalList，totalList 就是左右两棵树共享的数据，数组的差集和过滤比树结构要好做很多

左侧树的数据 = 全部数据 - targetList，如果搜索，就将上一步得到的 list 过滤一下，最后将数组转成树结构(showData)

右侧同理，就是 targetList，搜索的话就再过滤下，最后转为树结构

需要计算左右侧展示数据的场景：初始化、移动、搜索

数组转树的过程中可以同时获取 expandedKeys，比如右侧总是打开状态，左侧只有在搜索时展开父节点

 

标签：antdv,展示,穿梭,树形,搜索,两棵树,右侧,节点
来源： https://www.cnblogs.com/veinyin/p/14340241.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。