ant-design-vue穿梭框，当tree遇到Transfer

最近项目中运动用到了transfer，而且还和tree一起运用，真的是头大，不过还好，最终还是解决了。

ant-design-vue文档里都有，我只粘贴部分代码--------

  <a-transfer
      class="tree-transfer"
      :data-source="dataSource"
      :target-keys="targetKeys"//重要的部分
      :render="item => item.title"
      :show-select-all="false"
      @change="onChange"
    >

 <template
        slot="children"
        slot-scope="{
          props: { direction, selectedKeys },
          on: { itemSelect },
        }"
      >
      //没有了checkStrictly，父级和子级就有关联了
        <a-tree
          v-if="direction === 'left'"
          blockNode
          checkable
          defaultExpandAll
          :replace-fields="replaceFields"//自定义设置字段
          :checkedKeys="[...selectedKeys, ...targetKeys]"
          :treeData="treeData"//树的数据
          @check="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys],itemSelect)}"
          @select="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys],itemSelect)}"
        />
      </template>

Transfer 中，dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识

对于后端返回的数据，没有key和title的数据，该怎么解决？

replaceFields这个属性去设置，你想要的字段。在data中

 replaceFields: {
        key: "id",
        title: "label"
 },

而穿梭框dataSource的数据是来自transferDataSource，所以就可以

function flatten(list = []) {
  if (list) {
    list.forEach(item => {
      transferDataSource.push({
        key: item.id,
        title: item.label
      });
      flatten(item.children);
    });
  }
}

对于穿梭的问题

direction这个属性是起到了一定的作用了，穿梭是@change="onChange"这个事件完成的，因此要知道targetKeys，它的作用是啥？所以在这个函数里。

onChecked(_, e, checkedKeys, itemSelect){
   //_这个下划线，就是你勾的key值，全选时，它就是所有的key值，当然看你的需求
      this.totalChecked=_;//所以初始化一个状态赋值
      const { eventKey } = e.node
      itemSelect(eventKey, isChecked(this.totalChecked, eventKey));
  }

    //当然少不了direction
 onChange(targetKeys，direction) {
    this.targetKeys = targetKeys;//如果仅仅这样写是穿梭不到右边的，所以
  if(direction=='right'){
       this.targetKeys=this.totalChecked
       //如果你还要有其他需求，在里面可以再判断
     }
 // 但是，想要穿梭到左边来，得这样写
  if(direction=='left'){
       this.targetKeys=targetKeys
    }
  },

这个穿梭的功能就大概的实现了，里面的一些细节还要注意下…