完美解决 antd-vue a-transfer 中 a-tree接口异步加载

背景：

为了可以让antd-vue  穿梭框能够把异步的树形图，发现异步树能正常的使用该组件，搜索全网发现全网找不到案例，研究一天搞定了。

代码：

<template>
  <div >
  <!-- transfer -->
  <div>
        <a-transfer
      class="tree-transfer"
      :data-source="dataSource"
      :target-keys="targetKeys"
      :render="item => item.title"
      @change="transferchange"
      show-search
      :list-style="{
      width: '510px',
      height: '528px',
    }"
      :show-select-all="false"
    >
      <template
        slot="children"
        slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
      >
      
        <a-tree
          v-if="direction === 'left'"
       
          :load-data="onLoadData" blockNode  checkable checkStrictly :tree-data="treeData"  :checkedKeys="[...selectedKeys, ...targetKeys]" 
          @check=" (_, props) => {
              onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
            }
          "
            @select="
            (_, props) => {
              onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
            }"
        >
  </a-tree>
  
      </template>
    </a-transfer>
 
  </div>
  </div>
</template>

<script>
const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    slots: {
      icon: 'smile',
    },
    selectable:false,
    children: [
      { title: 'leaf1' , key: '0-0-0', slots: { icon: 'meh' }, children:[{ title: 'leaf12', key: '0-0-11', scopedSlots: { icon: 'custom' } }] },
      { title: 'leaf2', key: '0-0-1', scopedSlots: { icon: 'custom' } ,checked:true},
      { title: 'leaf3', key: '0-0-3', scopedSlots: { icon: 'custom' } },
    ],
    testdatatestdata:['0-0-1', '0-0-3']
  },
];
let transferDataSource = [];
function flatten(list = []) {
  list.forEach(item => {
    transferDataSource.push(item);
    flatten(item.children);
  });
}
flatten(JSON.parse(JSON.stringify(treeData)));

function isChecked(selectedKeys, eventKey) {
  return selectedKeys.indexOf(eventKey) !== -1;
}

function handleTreeData(data, targetKeys = []) {
  data.forEach(item => {
    item['disabled'] = targetKeys.includes(item.key);
    if (item.children) {
      handleTreeData(item.children, targetKeys);
    }
  });
  return data;
}

export default {
  name: "rx-user",
  data() {
    return {
      curval:"",
      curUser:{},
      targetKeys: [],
      dataSource: transferDataSource,
      treeData,
      treeData1:treeData
    }
  },
    created() {
        this.curval=this.value;
    },
    methods: {
      transferchange(targetKeys, direction, moveKeys){
        console.log('transferchange',targetKeys,direction,moveKeys);
        this.targetKeys = targetKeys;
        console.log('this.testdata',this.testdata);
      },
      onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
		// 模拟接口加载
        setTimeout(() => {
          treeNode.dataRef.children = [
            { title: `${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` ,scopedSlots: { icon: 'custom' }},
            { title: `${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` ,isLeaf:true,scopedSlots: { icon: 'custom' }},
          ];
          this.treeData = [...this.treeData];
          // 更新穿梭框原数据
         // 修复穿梭宽带disabled的问题
          this.dataSource = [...this.dataSource ,...JSON.parse(JSON.stringify(treeNode.dataRef.children).replaceAll('disabled: true,','').replaceAll('disabled: true',''))]；
           resolve();
        }, 1000);
      });
    },
      callback(){},
      onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
    onChange(targetKeys) {
      console.log('Target Keys:', targetKeys);
    
      this.targetKeys = targetKeys;
      console.log('this.testdata',this.testdata);
    },
    onChecked(_, e, checkedKeys, itemSelect) {
      // 增加如果是不是叶节点，就不让选中-配置下面注释的代码，
     // if(!e.node.dataRef.isLeaf){
       //   return;
      //}
      console.log('onChecked _ treeData',this.treeData)
      console.log('onChecked _',_);
      console.log('onChecked e',e);
      console.log('onChecked checkedKeys',checkedKeys);
      console.log('onChecked itemSelect',itemSelect);
      if(e.node.dataRef.test){
          return;
      }
      const { eventKey } = e.node;
      itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
    
    },

  },


}

</script>

<style scoped>
/* 开启css样式的话，可以控制只能叶节点能被选择*/
/* .tree-transfer /deep/ .ant-tree-switcher + .ant-tree-checkbox{
  display:none;
} 
.tree-transfer /deep/ .ant-tree-switcher.ant-tree-switcher-noop + .ant-tree-checkbox{
  display:inline-block!important;
} */
</style>

上面代码是所有节点都能选中的，我实际是公司组织人员选择需要使用，所以只能选择叶节点的，

js和css部分就是要上面代码注释的

<style scoped>
.tree-transfer /deep/ .ant-tree-switcher + .ant-tree-checkbox{
  display:none;
} 
.tree-transfer /deep/ .ant-tree-switcher.ant-tree-switcher-noop + .ant-tree-checkbox{
  display:inline-block!important;
}
</style>

    onChecked(_, e, checkedKeys, itemSelect) {
      // 增加如果是不是叶节点，就不让选中，
      if(!e.node.dataRef.isLeaf){
          return;
      }
      console.log('onChecked _ treeData',this.treeData)
      console.log('onChecked _',_);
      console.log('onChecked e',e);
      console.log('onChecked checkedKeys',checkedKeys);
      console.log('onChecked itemSelect',itemSelect);
      const { eventKey } = e.node;
      itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
    
    },

最终结果：

 哈哈哈，完美^-^ ,有问题点赞关注，免费解答