element plus实现树形穿梭框

Element Plus 是一个基于 Vue.js 的 UI 组件库，它提供了丰富的组件来帮助开发者构建 Web 应用。要实现树形穿梭框，你可以使用 Element Plus 提供的 Transfer 组件，并结合 Tree 组件来实现。

首先，你需要在 Vue 项目中安装 Element Plus：

npm install element-plus

然后，在你的 Vue 组件中导入所需的组件和样式：

import { Transfer, Tree } from 'element-plus';
import 'element-plus/lib/theme-chalk/transfer.css';
import 'element-plus/lib/theme-chalk/tree.css';

接下来，你可以在模板中使用 Transfer 和 Tree 组件来实现树形穿梭框：

<template>
  <div>
    <transfer
      :data="data"
      :titles="['Source', 'Target']"
      filterable
      :props="treeProps"
    ></transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          key: 1,
          label: 'Node 1',
          children: [
            {
              key: 11,
              label: 'Node 1-1'
            },
            {
              key: 12,
              label: 'Node 1-2'
            }
          ]
        },
        {
          key: 2,
          label: 'Node 2',
          children: [
            {
              key: 21,
              label: 'Node 2-1'
            },
            {
              key: 22,
              label: 'Node 2-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

以上代码中，`data` 数组定义了树形结构的数据，`treeProps` 对象指定了树组件的数据结构。在 Transfer 组件中，你可以通过 `data` 属性传递树形数据，通过 `titles` 属性设置穿梭框的标题，通过 `filterable` 属性开启可搜索功能，通过 `props` 属性设置树组件的参数。

这样，你就可以使用 Element Plus 的 Transfer 和 Tree 组件来实现树形穿梭框了。希望对你有帮助！