el-tree与el-transfer结合成树形穿梭框（tree-transfer）

最新推荐文章于 2025-06-06 08:35:51 发布

啊巳~

最新推荐文章于 2025-06-06 08:35:51 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue elementUI

本文链接：https://blog.csdn.net/weixin_38797742/article/details/117739590

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种基于Element UI的树形穿梭框组件配置方法，包括如何设置数据结构、切换模式、监听添加与移除事件等关键步骤。此外，还提供了通讯录模式的使用说明。

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

下载

npm install el-tree-transfer --save

<tree-transfer 
        :title="['模块（菜单）访问权限', '拥有的操作权限']"
        :from_data='fromData'
        :to_data='toData'
        :defaultProps="{label:'label', children: 'children'}"
        @addBtn='add'
        @removeBtn='remove'
        :mode='mode'
        :pid="parentId"
        :style="{height: '75%'}"
        filter
        openAll>
        </tree-transfer>

import treeTransfer from 'el-tree-transfer' 
export default {
    components:{ treeTransfer },
    data(){
        return{
            parentId: 'parentId',
            mode: "transfer",
            fromData: [
                {
                id: "1",
                parentId: 0,
                label: "房源综合业务管理平台",
                children: [
                {
                    id: "1-1",
                    parentId: "1",
                    label: "首页",
                    children: []
                },{
                    id: "1-2",
                    parentId: "1",
                    label: "房源信息管理系统",
                    children: [
                    {
                        id: "1-2-1",
                        parentId: "1-2",
                        children: [],
                        label: "数据统计"
                    },{
                        id: "1-2-2",
                        parentId: "1-2",
                        children: [],
                        label: "房源信息管理"
                    },{
                        id: "1-2-3",
                        parentId: "1-2",
                        children: [],
                        label: "房源入库管理"
                    }]
                }]
            }],
            toData:[]
        }
    },
    methods:{
        // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
      changeMode() {
        if (this.mode == "transfer") {
          this.mode = "addressList";
        } else {
          this.mode = "transfer";
        }
      },
      // 监听穿梭框组件添加
      add(fromData,toData,obj){
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
      },
      // 监听穿梭框组件移除
      remove(fromData,toData,obj){
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
      }
    },
}

注意：

1，标题类型：Array 必填：false 默认：[“源列表”, “目标列表”]
2，设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
3，源数据类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid！！！！！！！！