下载
npm install el-tree-transfer --save
<tree-transfer
:title="['模块(菜单)访问权限', '拥有的操作权限']"
:from_data='fromData'
:to_data='toData'
:defaultProps="{label:'label', children: 'children'}"
@addBtn='add'
@removeBtn='remove'
:mode='mode'
:pid="parentId"
:style="{height: '75%'}"
filter
openAll>
</tree-transfer>
import treeTransfer from 'el-tree-transfer'
export default {
components:{ treeTransfer },
data(){
return{
parentId: 'parentId',
mode: "transfer",
fromData: [
{
id: "1",
parentId: 0,
label: "房源综合业务管理平台",
children: [
{
id: "1-1",
parentId: "1",
label: "首页",
children: []
},{
id: "1-2",
parentId: "1",
label: "房源信息管理系统",
children: [
{
id: "1-2-1",
parentId: "1-2",
children: [],
label: "数据统计"
},{
id: "1-2-2",
parentId: "1-2",
children: [],
label: "房源信息管理"
},{
id: "1-2-3",
parentId: "1-2",
children: [],
label: "房源入库管理"
}]
}]
}],
toData:[]
}
},
methods:{
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode() {
if (this.mode == "transfer") {
this.mode = "addressList";
} else {
this.mode = "transfer";
}
},
// 监听穿梭框组件添加
add(fromData,toData,obj){
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
},
// 监听穿梭框组件移除
remove(fromData,toData,obj){
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
}
},
}
注意:
1, 标题 类型:Array 必填:false 默认:[“源列表”, “目标列表”]
2,设置模式,字段可选值为transfer|addressList 类型:String 必填:false 补充:mode默认为transfer模式,即树形穿梭框模式,可配置字段为addressList改为通讯录模式,通讯录模式时按钮不可自定义名字,如要自定义标题名在title数组传入四个值即可,addressList模式时标题默认为通讯录、收件人、抄送人、密送人
3,源数据 类型:Array 必填:true 补充:数据格式同element-ui tree组件,但必须有id和pid!!!!!!!!