一个基于vue和element-ui的树形穿梭框组件

最新推荐文章于 2025-04-02 15:54:40 发布

春深是蔚蓝

最新推荐文章于 2025-04-02 15:54:40 发布

阅读量4k

点赞数

分类专栏： element-ui vue

本文链接：https://blog.youkuaiyun.com/qq_15390381/article/details/105201877

版权

el-tree-transfer是一个轻量、易用的Vue树形穿梭框组件，基于Element-UI的Checkbox、Button和Tree组件。适用于已引入Element-UI的项目，提供树形结构数据的穿梭功能。组件不断迭代更新，如2.2.0版本增加了lazy懒加载，2.1.1版本支持arrayToTree。使用时请注意数据格式和版本更新提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tree-transfer

简介·请先阅读文档及版本说明

因为公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外引入其他重量级插件，因此就有了el-tree-transfer。轻量，易用，无需投入其他学习成本。

el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经引入element-ui！此组件功能类似于element-ui的transfer组件，但是里面的数据是树形结构！实际上，el-tree-transfer依赖的element-ui组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在element-ui的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。ui完全按照element-ui风格。
注意：使用此插件时默认你已经引入了element-ui的button，check-box，tree组件！
vuecli3版本

在线访问 - GitHub - NPM - SegmentFault - 优快云- 掘金

注意！ 2.2.0 版本增加lazy懒加载功能

注意！ 2.0.0 版本存在父子不关联错误，2.1.1 版本增加 arrayToTree 支持，但已经是树形数据的请不要使用此参数

注意！ 1.9.0 版本增强id为数字型的匹配强度，1.9.7版本增加`defaultTransfer`属性用来满足用户不想将数据拆分成fromData和toData的需求

注意！ 1.8.9 版本修复一个节点既是一侧的枝干节点又是另一侧的叶子节点时穿梭引起的重复错误！解决自定义节点名时筛选无效错误

注意！ 1.8.7 版本增加通讯录模式，可通过 mode 字段配置模式

注意！ 1.7.7 版本移动事件参数调整，直接返回移动后的 fromData 数据和 toData 数据。

注意！ 1.5 以上版本改为自动处理

第一层数据的 pid 请设定为 0！！
id推荐为string，但也可以是number，请不要混用，id不能重复！

##快速上手

先npm下载插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

然后你可以像使用普通组件一样使用el-tree-transfer

GitHub demo代码地址欢迎star 谢谢

<template>
    <div>
    // 你的代码
    ...
    // 使用树形穿梭框组件
    <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}"             @addBtn='add' @removeBtn='remove' :mode='mode' height='540px' filter openAll>
    </tree-transfer>
  </div>
</template>  

<script>
import treeTransfer from 'el-tree-transfer' // 引入

   export defult {
    data(){
      return:{
        mode: "transfer", // transfer addressList
        fromData:[
          {
            id: "1",
            pid: 0,
            label: "一级 1",
            children: [
              {
                id: "1-1",
                pid: "1",
                label: "二级 1-1",
                children: []
              },
              {
                id: "1-2",
                pid: "1",
                label: "二级 1-2",
                children: [
                  {
                    id: "1-2-1",
                    pid: "1-2",
                    children: [],
                    label: "二级 1-2-1"
                  },
                  {
                    id: "1-2-2",