-- 穿梭框右侧 --> <!-- 右侧直接放置结果 --> <!-- 这里也采用tree结构,默认是对数据进行处理使得没有树形结构,也可以选择有树形结构 --> 已选择 0"> <el-tree ref="treeRight" :data="dataRight" show-checkbox node-key="id" :props="defaultProps" @check-change="rightCheckChange"> </e...
实现左右树形 思路:进入树形穿梭框页面,获取所有的数据(左侧右侧数据在一个大数组),每一项有一个标识selected(selected为后端定义)为true时在右侧,所以在进入页面后,写两个方法,分别把数据放到左侧fromData和右侧toDat。实现在下方 数据结构 dataList为所有数据,最外层的父级pid必须是0(文档规定,且父级pid:0必须是N...
右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足,于是自己基于ElementUI和VUE2.X做了一个小组件,优化的地方还很多,但是能够基本满足业务需求,后面有时间也会努力去改的更加灵活。
// 使用树形穿梭框组件<tree-transfer:title="title":from_data='fromData':to_data='toData':defaultProps="{label:'label'}"@addBtn='add'@removeBtn='remove':mode='mode'height='540px'filteropenAll></tree-transfer></template>import treeTransfer from 'el-tree-transfer' // 引入 export defult {...
("obj:", obj); }, // 监听穿梭框组件移除 remove(fromData,toData,obj){ // 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象 // 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表 console.log("from...
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件,使用前请确认已经引入元素-ui!此组件功能类似于element-ui的转移组件,但是里面的数据是树形结构!实际上,el-tree-transfer依赖的element-ui组件分别是Checkbox多选框,Button按钮,和最主要的Tree树形控件写成!并非是在element-ui的穿梭框组件上的扩展,而仅仅是...
树形穿梭框组件,基于 vue + element-ui,使用场景:经营类目、部门选择等场景。使用前请先确认安装并注册 element-ui。 安装 npminstallele-tree-transfer-S 挂载方式 1. 局部挂载: import{TreeTransfer}from"ele-tree-transfer";exportdefault{components:{TreeTransfer,},} ...
基于VUE和element-ui的树形穿梭框组件el-tree-transfer <tree-transfer :title="['组织架构', '已选择']":from_data='fromData':to_data='toData':defaultProps="{label:'label'}"@addBtn='add'@removeBtn='remove'@right-check-change="rightChange":mode='mode'height='540px'filter openAll> ...
因为公司业务使用vue框架,ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外引入其他重量...
事件:removeBtn说明:点击移除按钮时触发的事件回调参数:function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表 ...