el-tree-transfer
因业务需求需要用到一个穿梭框组件,而各大主流UI库和市面上的穿梭框都是一维数据,不支持树形结构的穿梭数据,
然后我自己就写了一个树形穿梭框组件,用户界面完全按照元素的UI风格。并且使用此插件时默认你已经引入了元素的用户界面的按钮,复选框,树组件!并且是一个VUE项目,你就可以像使用普通VUE组件一样使用它。
埃尔树转移
简介
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件,使用前请确认已经引入元素-ui!此组件功能类似于element-ui的转移组件,但是里面的数据是树形结构!实际上,el-tree-transfer依赖的element-ui组件分别是Checkbox多选框,Button按钮,和最主要的Tree树形控件写成!并非是在element-ui的穿梭框组件上的扩展,而仅仅是参照了其外观样式和功能。
因为公司业务使用VUE框架,UI库使用的元素的用户界面。在市面上找到一个好用的VUE树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在元件的UI之外引入其他重量级插件,因此就有了EL-树转移。轻量,易用,无需投入其他学习成本。
注意!
第一层数据的pid请设定为0!
id推荐为字符串,但也可以是数字,请不要混用
快速上手
先NPM下载插件
npm install el-tree-transfer --save
或
npm i el-tree-transfer -S
然后你可以像使用普通组件一样使用EL-树转移
<template>
<div>
// 你的代码
...
// 使用树形穿梭框组件
<tree-transfer :from_data = 'fromData' :to_data = 'toData' @addBtn='add' @removeBtn='remove'></tree-transfer>
</div>
</template>
<script>
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data(){
return:{
fromData:[
{
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:{
// 监听穿梭框组件添加
add(data){
conlose.log(data)
},
// 监听穿梭框组件移除
remove(data){
conlose.log(data)
}
},
comporents:{ treeTransfer } // 注册
}
</script>
<style>
...
</style>
...
文档
参数:宽度说明:宽度类型:字符串必填:假默认:100%补充:建议在外部盒子设定宽度和位置
参数:高度说明:高度类型:字符串必填:假默认:320
参数:标题说明:标题类型:数组必填:假默认:[“源列表”,“目标列表”]
参数:BUTTON_TEXT说明:按钮名字类型:数组必填:假默认:空
参数:from_data说明:源数据类型:数组必填:true补充:数据格式同element-ui tree组件,但必须有id和pid
参数:to_data说明:目标数据类型:数组必填:真补充:数据格式同元素-ui树组件,但必须有ID和PID
参数:defaultProps
说明:配置项-同el-tree中props
必填:false
补充:用法和el-tree的props一样
参数:node_key
说明:自定义node-key的值,默认为id
必填:false
补充:必须与treedata数据内的id参数名一致,必须唯一
参数:pid
说明:自定义pid的参数名,默认为"pid"
必填:false
补充:有网友提出后台给的字段名不叫pid,因此增加自定义支持
事件:addBtn
说明:点击添加按钮时触发的事件
回调参数:data为选中节点id
事件:removeBtn
说明:点击移除按钮时触发的事件
回调参数:data为选中节点id
版本说明
1.4.8版本修复了id为number类型时无法通过重复校验函数的问题,但仍然推荐id使用字符串型
1.4.7增加版本了
defaultProps
参数,node_key
参数,pid
参数,主要作用为可以自定义一些重要字段名,来提高数据灵活性,避免和后台因为字段名不同而被祭天
1.3.7版本取消了对loadsh库的依赖,此前仅用此库做某些深拷贝处理