elementui 使用el-table完成transfer基本功能

不知道大家有没碰到用elementui中transfer组件功能，里面的列表其实是el-checkbox-group。这就有个问题，如果列表中有多列数据需要区分显示就没办法了，毕竟是el-checkbox。但是这种需求的功能一般项目都不多。
下面这个是我改造的效果

初始数据也可以在右边已选框中。如果有多列可以很好区分开，同时支持待选列表也就是左边table搜索功能。

基本实现思路：
1.左右两边各一个table列表，左边代表待选区，右边代表已选区。
2.通过table自带多选功能把勾选中的值通过中间按钮push到右边table绑定的数组中，同时左边删除被勾选的item。
3.右边删除功能删除右边该行的数据同时左边push回这条数据。
4.右边每次有数据变动(添加或者删除)时，需要$emit数据到父组件进行数据提交更新。(transfer组件是作为子组件使用的)
5.搜索功能是可选的，左边列表数组通过Input搜索框绑定的v-model值来indexOf()。
5.1这里需要注意的是，检索出来的列表数据实时更新。所以在删除检索值要判断是否删除所有输入值（我这里最后删除到" "空值时会出现重复数据，所以加个判断）。
6.因为是子组件，所以初始值是通过父组件传递的。但传递数据可能会动态更新，所以用watch监听props内容。（注意：watch在组件通过v-if创建时并不会执行）

下面开始上代码：
HTML：

这两个table其实也就是百度上的自定义table功能。而tableKey则是从父组件通过props传进来的数组。

tableKey: [{
                name: '主账号',
                value: 'accountNames',
                label: 100
              },{
                name: '主账号别名',
                value: 'accountNbrs',
                label: 100
              }],

JS：

这里是在watch中把父组件传递过来的数据进行初始化赋值。而搜索功能则是通过待选table绑定的数组中的字段来检索，而字段又是通过tableKey中的值来获取。（因为table也是动态的，不知道绑定数组中具体的字段名，所以需要通过tableKey来对应）。

其他的在代码中也有注释说明。
如果想看组件文件代码的话，下载地址：https://download.csdn.net/download/u012138137/10604091

后续修改的代码，下载地址：(新增已选列表搜索功能，修复搜索时数据重复问题)
https://download.csdn.net/download/u012138137/10723369

2019年1月28日 功能改进以及一些问题优化(把已选列表中只能单个删除改为多选转移，效果同原生el看去一样，原先单个删除有的代码只注释没删除同样可以参考)
https://download.csdn.net/download/u012138137/10880865