关于element中 el-Transfer 实列

需要实现的效果：

   

先附上官网：https://element.eleme.cn/#/zh-CN/component/transfer：官网默认实例

在这里遇见俩坑：

data一开始的数据

 

 

1  在展示leftDate的时候 无法绑定数据时：定义一个新的数组去接受

 

 

2 注意数据类型是否对应：当你的 key 为  "1" 的时候  1是无法获取到数据的

通过 vue devtools调试的时候发现 key与rightData的数据类型不同

然后数据格式要改成【“1”，“603”】

 

二：

@row-click和@selection-change的耦合

需求：点击某一行，将该行背景色改变   

先展示效果图:

 

checkbox勾选的时候，alert会被触发两次。我猜测是@row-click和@selection-change耦合了，但是element-UI的文档很简洁，不知道@row-click和@selection-change怎么解耦。
正常效果应该是点击一行数据alert出数据的id,点击checkbox把id存起来。

代码：el-table

方法：

css：