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– 掘金
注重！ 2.2.0 版本增添lazy懒加载功用
注重！ 2.0.0 版本存在父子不关联毛病，2.1.1 版本增添 arrayToTree 支撑，但已是树形数据的请不要运用此参数
注重！ 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
<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 addressList
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:{
// 切换形式 现有树形穿越框形式transfer 和通讯录形式addressList
changeMode() {
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的需求 - 参数：
arrayToTree申明：是不是开启一维数组转化为树形构造范例：Boolean必填：false补充：数据必需存在根节点，而且不会断节，数据格式详见github上app.vue，依据id、pid对应关联转化，存在肯定的机能题目 - 参数：
addressOptions申明：通讯录形式设置项{num: Number, suffix: String, connector: String}范例：Object必填：false补充：num-> 所需右边通讯录个数,默许3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默许suffix connector -> 连接符（字符串）默许- - 参数：
lazy申明：是不是启用懒加载范例：Boolean必填：false补充：默许false，结果动el-tree懒加载，不可和openAll或默许睁开同时运用 - 参数：
lazyFn申明：懒加载的回调函数范例：Function必填：true补充：当实用lazy时必需传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前睁开节点node，resolve->懒加载resolve，from -> left|right 示意回调来自左边|右边 - 事宜：
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形式时返回参数为右边收件人列表、右边抄送人列表、右边密送人列表 - 事宜：
left-check-change申明：左边源数据勾选事宜回调参数：function(nodeObj, treeObj)见el-tree组件check事宜返回值 - 事宜：
right-check-change申明：右边目的数据勾选事宜回调参数：function(nodeObj, treeObj)见el-tree组件check事宜返回值 - Slot：
left-footer,right-footer申明：穿越框左边、右边底部slot - Slot:
title-left,title-right申明：穿越框题目区左边、右边自定义内容
版本申明
2.2.0 增添lazy懒加载功用(非通讯录形式)，详细参数申明见
参数21, 参数222.1.2 增添通讯录形式的可设置项，但作为非主要保护形式天真度仍较低，详细参数申明见
参数202.1.1 修复 array 数组形式挑选根节点穿越毛病,烧毁
leafOnly参数，注重已是树构造的不要运用 arrayToTree 参数2.1.0 增添 arrayTotree 参数，处置惩罚一维数组自动转化为所需树构造(详见参数 19,或github-app.vue)；修复穿越后半选节点残留的题目；去除部份不必要变量
2.0.2 增添题目头部 slot 自定义内容区
2.0.1 修复父子不关联题目。
2.0.0 版本增添穿越框左边、右边数据勾选事宜，穿越框左边、右边底部 slot。
1.9.8 版本修复自定义按钮
button_text的报错。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库的依靠，此前仅用此库做某些深拷贝处置惩罚
