先 npm 下载插件
npm install el-tree-transfer --save
或
npm i el-tree-transfer -S
然后你可以像使用普通组件一样使用 el-tree-transfer
html代码:
<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>
JS代码:
<script>
import treeTransfer from 'el-tree-transfer' // 引入
export default {
data(){
return{
mode: "transfer",
*//注意fromData数据格式,必须完全一样,如果不一样,需要进行对应的更改*
fromData:[
{
id: "1",
pid: 0,
label: "一级 1",
children: [
{
id: "1-1",
pid: "1",
label: "二级 1-1",
disabled: true,
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>
这些东西很多博客里都写到了,但是,我在这里是分享自己踩坑经历:
- 直接把git上的代码拿过来用是报错的,错误点如下:
- fromData的数据格式(包括字段名称)要注意,都必须跟作者保持一直,因为源码中是用这些字段来进行树与数组结构的转化。
本人在用的时候就出现了一个问题,数据从左边穿梭到右边后树形结构丢了,后来找了好久发现是后台返给我的fromData中没有pid,是parentId,所以在源码中解析不到pid,就不会给你转成树!
如果后台返的字段名就是不一样,那怎么办呢?别担心,有办法:(组件源码获取父组件传值如下)
props: {
···
// el-tree 配置项
defaultProps: {
type: Object,
default: () => {
return { label: "label", children: "children" };
}
},
// el-tree node-key 必须唯一
node_key: {
type: String,
default: "id"
},
// 自定义 pid参数名
pid: {
type: String,
default: "parentId"
},
···
},
可以通过以上几个参数来进行传值,如:
这样就可以了。
- 这两点注意到了的话,那一般的需求都可以解决掉了,可是如果还有其他需求怎么办?比如el-tree中子级要求单选···这时,我们可以把源码下载下来,然后自己再根据自己的需求进行更改。需要注意我们只需要这几个文件就可以了:
把这4个文件复制到自己的项目中(注意文件的引入),然后将
import treeTransfer from 'el-tree-transfer' // 引入
换成:
import treeTransfer from 'transfer-extend.vue文件地址' // 引入
就可以了。源码中作者将代码注释的很清楚,然后根据自己的需求再改就好啦。