本文地址：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，比如右侧总是打开状态，左侧只有在搜索时展开父节点