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

原创

已于 2022-11-01 13:50:57 修改 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #antd #antd vue

于 2022-11-01 10:59:05 首次发布

本文介绍如何在 Antd-Vue 中实现带有异步树的穿梭框组件，并提供了完整的代码示例。通过自定义加载数据的方法，实现了树形结构的动态加载，同时确保了组件的正常运作。

背景：

为了可以让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="t