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

el-tree-transfer

因业务需求需要用到一个穿梭框组件,而各大主流UI库和市面上的穿梭框都是一维数据,不支持树形结构的穿梭数据,

然后我自己就写了一个树形穿梭框组件,用户界面完全按照元素的UI风格。并且使用此插件时默认你已经引入了元素的用户界面的按钮,复选框,树组件!并且是一个VUE项目,你就可以像使用普通VUE组件一样使用它。

el-tree-fransfer

el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件,使用前请确认已经引入元素-ui!此组件功能类似于element-ui的转移组件,但是里面的数据是树形结构!实际上,el-tree-transfer依赖的element-ui组件分别是Checkbox多选框,Button按钮,和最主要的Tree树形控件写成!并非是在element-ui的穿梭框组件上的扩展,而仅仅是参照了其外观样式和功能。

因为公司业务使用VUE框架,UI库使用的元素的用户界面。在市面上找到一个好用的VUE树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在元件的UI之外引入其他重量级插件,因此就有了EL-树转移。轻量,易用,无需投入其他学习成本。

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

注意! (1.5版本以上会自动处理)第一层数据的 pid 请设定为 0!!id推荐为string,但也可以是number,请不要混用,id不能重复!

先NPM下载插件

npm install el-tree-trans

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值