异步加载数据elment-plus树形穿梭框

对于异步加载数据的需求，你可以使用 Element Plus 的 Tree 组件结合 Transfer 组件来实现树形穿梭框。

首先，你需要通过 Tree 组件来展示树形数据。可以通过指定 `lazy` 属性为 `true` 来开启异步加载：

<el-tree :lazy="true" :load="loadData" :props="defaultProps"></el-tree>

其中，`:load` 属性指定了一个方法来异步加载数据，`:props` 属性用于设置数据的字段映射。

接下来，你需要在 Vue 实例中定义 `loadData` 方法来实现异步加载数据的逻辑：

methods: {
  loadData(node, resolve) {
    if (node.level === 0) {
      // 根节点的数据加载逻辑
      // resolve方法用于返回根节点数据
      resolve([
        { id: 1, label: 'Node 1' },
        { id: 2, label: 'Node 2' },
        { id: 3, label: 'Node 3' }
      ]);
    } else {
      // 子节点的数据加载逻辑
      // resolve方法用于返回子节点数据
      resolve([
        { id: 4, label: 'Node 1-1' },
        { id: 5, label: 'Node 1-2' },
        { id: 6, label: 'Node 1-3' }
      ]);
    }
  }
}

在 `loadData` 方法中，你可以根据传入的 `node` 参数的 `level` 属性来判断当前加载的是根节点还是子节点，然后根据实际情况返回对应的数据。

最后，你可以将 Tree 组件与 Transfer 组件结合起来，实现树形穿梭框的效果：

<el-transfer :data="data" :target-keys="targetKeys"></el-transfer>

其中，`:data` 属性是传入 Transfer 组件的数据，`:target-keys` 属性用于设置已选中的节点。

综上所述，你可以通过以上步骤来实现异步加载数据的 Element Plus 树形穿梭框。希望能对你有所帮助！如果你还有其他问题，请继续提问。