关于el-tree-transfer底层bug

el-tree-transfer主要是基于element框架进行搭建的一个穿梭框，功能比较强大好用呢，但是在数据这块必须要小心谨慎一点，稍微有点不同就显示不出来，这点的话可以参考管网el-tree-transfer - npm A tree shaped shuttle box assembly based on Vue and element-ui 一个基于vue.js和element-ui的树形穿梭框，也可用于邮件通讯录https://www.npmjs.com/package/el-tree-transfer

还有一点比较不明显的问题就是搜索后筛选出来的数据再点击全选的话会把原始的数据都带过去，而不是搜索出来的，下面是具体问题描述：

 

 中间也想过自己封装一个，但是又觉得麻烦，所有还是选择去解决问题，其实主要原因还是在于底层源码在数据处理中存在bug,数据过滤没做好以及element ui el-tree本身 bug造成的。

修改方案
1、直接在源码中解决问题（比较难找）
2、页面引入组件tree-transfer 数据更新触发change 通过change回调改 组件底层数据
这里就是采用的第二种，直接在组件中添加@left-check-change="onLeftChange" @right-check-change="onRightChange"两个方法
 

//  BUG解决: tree-transfer 过滤并全选节点后，添加或移除选项会将未过滤节点同步到另一侧问题

      onLeftChange() {

        const treeTransfer = this.$refs.transfer.$refs['wl-transfer-component'];

        const fromTree = treeTransfer.$refs['from-tree'];

        const fromTreeCheckedKeys = fromTree.getCheckedKeys(true);

        const _fromTreeCheckedKeys = fromTreeCheckedKeys.filter(node => {

          return fromTree.getNode(node).visible;

        });

        fromTree.setCheckedKeys(_fromTreeCheckedKeys);

      },

      onRightChange() {

        const treeTransfer = this.$refs.transfer.$refs['wl-transfer-component'];

        const toTree = treeTransfer.$refs['to-tree'];

        const toTreeCheckedKeys = toTree.getCheckedKeys(true);

        const _toTreeCheckedKeys = toTreeCheckedKeys.filter(node => {

          return toTree.getNode(node).visible;

        });

        toTree.setCheckedKeys(_toTreeCheckedKeys);

      },
这样bug就解决了，测试了一下，没有问题。太不容易了......