vue3使用树状穿梭框插件

Vue3中可以使用Element Plus库中的Transfer（穿梭框）组件来实现树状穿梭框。以下是如何使用的步骤：

1. 安装Element Plus

npm install element-plus --save

2. 在Vue项目中引入Element Plus

在main.js文件中添加以下代码：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

3. 使用Transfer组件

在需要使用穿梭框的组件中，使用Transfer组件，并传入需要展示的数据：

<template>
  <el-transfer
    v-model="value"
    :data="data"
    :props="props"
    filter-placeholder="请输入关键字"
    :titles="['源列表', '目的列表']">
  </el-transfer>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      props: {
        label: 'label',
        children: 'children'
      },
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                },
                {
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                },
                {
                  label: '三级 2-1-2'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                },
                {
                  label: '三级 2-2-2'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

在上述代码中，data为需要展示的数据，props为数据中每个节点的label和children属性名，titles为穿梭框的左右标题。

4. 样式优化

如果需要对穿梭框的样式进行优化，可以在项目中引入自定义样式文件，并覆盖Element Plus默认样式。例如：

.el-transfer {
  width: 600px;
  margin: 20px auto;
}

.el-transfer__buttons {
  margin-top: 80px;
}

.el-transfer__buttons button {
  margin-top: 10px;
  margin-bottom: 10px;
}

以上代码将穿梭框的宽度设置为600px，并将按钮组件的上下间距调整为10px。

这样，就可以在Vue3项目中使用树状穿梭框插件啦！