先看一下最后的效果：

一个基于elementui的穿梭框组件：el-tree-transfer

第一步：安装组件

npm install el-tree-transfer --save

第二步：写代码

    // 使用树形穿梭框组件<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>

import treeTransfer from 'el-tree-transfer' // 引入export defult {data(){return:{mode: "transfer", // transfer addressListfromData:[{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",pid: "1-2",children: [],label: "二级 1-2-2"}]}]},],toData:[]}},methods:{// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressListchangeMode() {if (this.mode == "transfer") {this.mode = "addressList";} else {this.mode = "transfer";}},// 监听穿梭框组件添加add(fromData,toData,obj){// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的        {keys,nodes,halfKeys,halfNodes}对象// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);},// 监听穿梭框组件移除remove(fromData,toData,obj){// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);}},components:{ treeTransfer } // 注册}

把上面的代码写完之后，就可以了哦。

参数说明：

参数：width 说明：宽度类型：String 必填：false 默认：100% 补充：建议在外部盒子设定宽度和位置
参数：height 说明：高度类型：String 必填：false 默认：320px
参数：title 说明：标题类型：Array 必填：false 默认：[“源列表”, “目标列表”]
参数：button_text 说明：按钮名字类型：Array 必填：false 默认：空
参数：from_data 说明：源数据类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
参数：to_data 说明：目标数据类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
参数：defaultProps 说明：配置项-同el-tree中props 必填： false
补充：用法和el-tree的props一样
参数：node_key 说明：自定义node-key的值，默认为id 必填：false
补充：必须与treedata数据内的id参数名一致，必须唯一
参数：pid 说明：自定义pid的参数名，默认为"pid" 必填：false
补充：有网友提出后台给的字段名不叫pid，因此增加自定义支持
参数：leafOnly 说明：是否只返回叶子节点类型：Boolean 必填：false
补充：默认false，如果你只需要返回的末端子节点可使用此参数
参数：filter 说明：是否开启筛选功能类型：Boolean 必填：false
参数：openAll 说明：是否默认展开全部类型：Boolean 必填：false
参数：renderContent 说明：自定义树节点类型：Function 必填：false 补充：用法同element-ui
tree
参数：mode 说明：设置模式，字段可选值为transfer|addressList 类型：String 必填：false
补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
参数：transferOpenNode 说明：穿梭后是否展开穿梭的节点类型：Boolean 必填：false
补充：默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
参数：defaultCheckedKeys 说明：默认展开节点类型：Array 必填：false
补充：只匹配初始时默认节点，不会在你操作后动态改变默认节点
参数：placeholder 说明：设置搜索框提示语类型：String 必填：false 补充：默认为请输入关键词进行筛选
参数：defaultTransfer 说明：是否自动穿梭一次默认选中defaultCheckedKeys的节点类型：Boolean
必填：false 补充：默认false，用来满足用户不想将数据拆分成fromData和toData的需求
事件：addBtn 说明：点击添加按钮时触发的事件
回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
事件：removeBtn 说明：点击移除按钮时触发的事件
回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

在vue项目中使用树形结构的穿梭框相关推荐

VUE项目中获得多个复选框 checkbox 选中的值（jquery）+ 解决 Uncaught TypeError: Cannot read property ‘push‘ of undefine
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 表格生成后第一列是复选框,效果: 表格是直接循环展示的后台返回数据,代码写法: 2. 得复选框 ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
vue项目中的小知识--快捷键-vue插件版本号--vscode插件等
vue项目中的小知识--快捷键等 0 版本号 1 代码片段的获取: 2 vscode中一些常用扩展 3 进入另一个文件夹,返回上一级 4查看Vue的版本和Vue/CLI的版本 5 --save-dev ...
vue项目中动态显示时间
vue项目中动态显示时间前言一.js源代码二.效果图 1.修改 2.html与style的修改 3.修改后效果图总结前言在vue项目中动态显示时间,并且按日期.时间.星期一列排列. 我们想 ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...

在vue项目中使用树形结构的穿梭框

先看一下最后的效果：

把上面的代码写完之后，就可以了哦。

在vue项目中使用树形结构的穿梭框相关推荐

最新文章

热门文章