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