参考列子:
1、说明:菜单为多级菜单的父子级结构,Element里边的transfer只涉及到一级列表展现,不太符合预期,然后就百度,发现有人写了tree-transfer插件,刚好是我想要的效果,然后就往这个方向去实现,但是网上的列子吧,和git上的示例代码基本一样,要真正实现一个动态的完整功能,还是需要一步一步来的!
2、npm下载插件,请参考Git示例
3、页面引用
<template>
<div class="widget-content">
<tree-transfer :title="title"
:from_data='fromData'
:to_data='toData'
:defaultProps="{label:'label',value:'id'}"
@addBtn='add'
@removeBtn='remove'
@change="changeMode"
:mode='mode' height='640px' filter openAll>
</tree-transfer>
<el-button type="primary" size="mini" @click="save" style="margin-left:30%;">保存</el-button>
</div>
</template>
import treeTransfer from 'el-tree-transfer' // 引入
别忘了export引入组件
export default {
components: {
treeTransfer
},
…………其他代码此处忽略
}
script所有代码:
<script>
import treeTransfer from 'el-tree-transfer' // 引入
export default {
components: {
treeTransfer
},
data(){
return{
roleId:"",
title:["已有菜单权限","可选菜单权限"],
mode: "transfer", // transfer addressList
fromData:[],
toData:[]
}
},
methods:{
//初始化数据
dataInitialization(id){
let that = this;
that.roleId = id;
that.axios
.get(
"/qsmonitor/menu/getMenuByRole?roleId="+id
)
.then(res => {
that.fromData = res.data.data.fromData;
that.toData = res.data.data.toData;
that.$notify({
title: "成功",
message: res.data.message,
type: "success"
});
})
.catch(err => {
that.$notify.error({
title: "错误",
message: err
});
console.log(err);
});
},
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode() {
if (this.mode == "transfer") {
this.mode = "addressList";
} else {
this.mode = "transfer";
}
},
// 减少权限设置
add(fromData,toData,obj){
this.fromData = fromData;
this.toData = toData;
},
// 增加权限设置
remove(fromData,toData,obj){
this.fromData = fromData;
this.toData = toData;
},
save(){
let addIds = "";
this.fromData.forEach((item,i)=>{
addIds += item.id+",";
});
this.axios
.put(
"/qsmonitor/menu/setMenu?roleId="+this.roleId+"&addIds="+addIds
)
.then(res => {
if (res.data.data) {
this.loading = false;
}
this.dataInitialization(this.roleId);
this.$notify({
title: "成功",
message: res.data.message,
type: "success"
});
})
.catch(err => {
console.info(err);
this.$notify.error({
title: "错误",
message: "系统异常"
});
console.log(err);
});
}
}
}
</script>
个人思路:
1、数据初始化,后台是查询到已拥有的权限list(赋值给fromData)和未拥有的菜单list(赋值给toData)
2、在点击保存按钮时,遍历到已拥有的菜单id并且拼接逗号连接的字符串返回给后台
后续完整功能:请参考VUE弹窗加载另一个VUE页面