一个基于vue和element-ui的树形穿梭框组件
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组件!
在线访问 - GitHub - NPM - SegmentFault - CSDN- 掘金
注意! 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 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);}},comporents:{ treeTransfer } // 注册}</script><style>
...
</style>
文档
- 参数:
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模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
版本说明
1.9.7 版本增加
defaultTransfer
属性用来满足用户不想将数据拆分成fromData和toData的需求,增加placeholder
属性。1.9.0 增强 id 既有数字又有字符型时的正则匹配强度。
1.8.9 版本修复一个节点既是一侧的枝干节点又是另一侧的叶子节点时穿梭引起的重复错误!解决自定义节点名时筛选无效错误。
1.8.8 版本增加
transferOpenNode
参数用来管理穿梭后是否展开节点,defaultCheckedKeys
用来设置初始时默认展开节点。1.8.7 版本增加通讯录模式,可通过 mode 字段配置模式,mode 字段可选值为
transfer
|addressList
。1.7.7 版本
addBtn
和removeBtn
事件参数调整,返回三个参数,第一个参数是移动后的fromData数据,第二个参数是移动后的toData数据,第三个参数是{keys, nodes, harfKeys, harfNodes}对象。增加renderContent
参数支持树节点自定义。1.6.7 版本增加
filter,openAll
参数,来设置是否开启筛选和是否默认展开全部1.5.9版本增加
leafOnly
参数,来设置是否只返回树的末端叶子节点1.5.8版本恢复上个版本莫名删掉的返回
nodes
的代码,如果您的项目只需要穿梭的node-key值则无需更新!道歉ing。。。1.5.7版本修复子组件异步数据有时不会更新的问题!修复了自定义参数名node_key,children时的一个错误,自动把第一层数据的pid替换为0
1.4.9版本增加了添加和移除按钮的回调参数,function(keys,nodes)第一个参数为选中节点node-key值,第二个参数为选中节点node
1.4.8 版本修复了id为number类型时无法通过重复校验函数的问题,但仍然推荐id使用string型
1.4.7 版本增加了
defaultProps
参数,node_key
参数,pid
参数,主要作用为可以自定义一些重要字段名,来提高数据灵活性,避免和后台因为字段名不同而被祭天1.3.7 版本取消了对loadsh库的依赖,此前仅用此库做某些深拷贝处理
很多有脾气的老哥找我给打赏,谢过,git上有收钱码~~~
一个基于vue和element-ui的树形穿梭框组件相关推荐
- Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件
el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入element-ui 官网npm文档:https://www.npmjs.com/ ...
- Vue实现Element UI的下拉框默认选中,值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue 穿梭框 组件
前言:由于项目需要,element ui 里面的穿梭框不满足需求,所以自己封装了一个穿梭框,此穿梭框为三个,可以两两穿梭. 如下图: 代码如下:如有bug ,欢迎指出: 其实数据的传输,最好用vuex ...
- 如何开发一个基于 Vue 的 ui 组件库
如何开发一个基于 Vue 的 ui 组件库 开发模式 预览 demo 在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码. 常见的解决方案是像开发一般项目一样使用 webpack-d ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用 参考文章: (1)vue的$nextTi ...
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- 【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
最新文章
- AD20使用中文菜单
- 20以内混合加减法100题_一年级数学20以内加减法混合运算练习题,寒假练习巩固!...
- c语言多维数组指针地址讲解,C语言入门之多维数组的指针变量
- linux 内核 scsi底层驱动程序,Linux系统下基于SCST的SCSI_Target驱动设计.doc
- swagger + springboot 传递 List参数解决
- 使用七牛云对网站进行加速基本配置
- crs-4124 Oracle 11gR2 RAC ohasd failed to start 解决方法
- Data-Hack SQL注入检测
- P Laguna/ A database for evaluation of algorithms for measurement of QT and other waveform interval
- php的$符的作用,PHP引用符的用法举例
- Atitit 信息处理设备与历史与趋势 目录 1. It设备简史与艾提拉觉得常见重要的设备	2 2. 第一部分 IT萌芽期(约公元前4000年至1945年)	2 2.1. 苏美尔人的象形文字(约公元
- 百度云安装WordPress,提示数据库连接错误!
- 如何使用3klCon实现大规模自动化网络侦察
- tomcat日志中文乱码问题
- FPGA(二)---38译码器
- 《动手学深度学习》| 2 深度学习基础
- IOS开发之——硬件开发-加速计传感器(03)
- NOIP提高组【JZOJ4809】挖金矿
- 企业上云“行稳致远”,新钛云服“服务+产品”模式升级上云、用云新思维 | 爱分析洞见...
- 图床,全网最稳定的免费图床
热门文章
- oracle dbua 升级,33篇Oracle升级文档大全(收藏版)
- 图表下面的文字怎么变竖排_Excel中如何制作多维组合图表?
- pat上写java程序_如何运行Java程序和设置CLASSPAT
- C语言描述信息的结构体,(c语言)游戏中由人物各种信息组成的结构体
- cfilefind 能找ftp 服务器上的文件夹吗?,将ftp目录映射为本地盘符
- 微信小程序php java_PHP实现微信小程序用户授权的工具类示例
- 20201015:力扣第210场周赛题解(上)
- 辽宁2009对口计算机试题文档之家,中职对口升学计算机网络检测试题一
- VB判断指定名字的进程是否存在函数
- 牙龈细菌会进入大脑,引发阿尔茨海默病 | 《科学》子刊最新研究