前言
其实真的后悔，应该在开发阶段时候就直接写文章的，因为现在才写，相当于又要重新回想一遍当时遇到的问题以及解决的过程，更难受的是还可能忘记了这样解决的原因。但是不写吧，时间久了就忘记了，以后又要努力回忆更久以前的事情......
从需求中成长，或许是我们现在提升自己最快的方式之一了
有一个需求：要一个穿梭框，能筛选，左边是全部数据，右边是左边选中的数据，筛选是左边筛选左边的，右边筛选右边的，右边是左边的选中项，所以左边的所有操作都影响着右边，左边取消勾选，右边就删除，左边勾选右边就添加
最终的实现结果是这样的：
功能就大致是这样：
正常看到这个应该立马想到的就是elementui的穿梭框了
很难受，这个穿梭框的中间有两个按钮，然后一定要点击按钮才能移动过去，移动还会导致左边的数据减少，更麻烦的是他的搜索，我们的搜索是远程搜索的，左右两边的数据也无法同步修改。所以呆呆的A货工厂就要开始了，把el-transfer的源码拷贝出来，一共两个vue文件，整个页面的transfer.vue以及每个面板具体的代码transfer-panel.vue
因为这个代码的使用特点可能是针对特定的需求，所以代码我就不写出来了，最重要是这部分代码在内网，搬出来很麻烦
筛选
虽然el-transfer给我们提供了筛选方法，但是看了源码的知道，筛选的方法是通过循环每一项给你外发的，就是基于当前的数据来做筛选的，而我们的筛选需要结合接口，每次面板的数据都是新的,因为可能存在你输入的内容远程有但是你本地没有（比如新入职的员工）
所以筛选的方法我调整为：
两边的数据
el-transfer的数据控制是通过中间的按钮来的，我们需要在点击勾选框就触发，所以在改动整个页面结构时候把按钮删了，然后添加change事件并外发出去给父组件使用
这里的checkChangeByUser是一个标志位，代表当前操作是用户触发的change，因为还可能是上次勾选项默认选中的情况也会导致这个事件的触发；通过这个change事件我们把关于左右边的数据的处理进行修改
我们的处理其实相对于elementui的简单很多，勾选左边的时候把值赋给右边的勾选数组，取消勾选也同步取消右边选项即可
总结
整个改造的过程调试最多的就是处理默认选中数据,因为界面上显示的是筛选后的数据, 所以有默认选中项时候需要走一次筛选方法来获取界面的数据, 以及双向绑定数据的处理,这是四个月前做的现在就想不太起来遇到的问题了==,但是以防以后还要用所以先记录下,源码的话就更改了筛选方法和处理了左右勾选的change事件触发实机,以及左右勾选的数据处理
