关于element中 el-Transfer 实列

需要实现的效果：

   

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

<template>
  <el-transfer v-model="value" :data="data"></el-transfer>
</template>

<script>
  export default {
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        data: generateData(),
        value: [1, 4]
      };
    }
  };
</script>

在这里遇见俩坑：

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：

<style>
  /*!* 用来设置当前页面element全局table的内间距 *!*/
  /*.el-table__row td{*/
    /*padding: 0;*/
  /*}*/
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: #b7f1ee !important;
    /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
  }
  /* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #b7f1ee;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }
</style>