一、视图代码
<el-collapse v-model="activeName"
v-loading="loading"
element-loading-text="正在加载..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
accordion
@change="change">
<el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>可访问的资源</span>
<el-button style="float: right; padding: 3px 0;color: #ff0000;" icon="el-icon-delete"
type="text" @click="deleteRole(r)"></el-button>
</div>
<div>
<el-tree
show-checkbox
node-key="id"
ref="tree"
:key="index"
:default-checked-keys="checkedKeys"
:data="allmenus"
:props="defaultProps"></el-tree>
<div style="display: flex;justify-content: flex-end">
<el-button @click="cancelUpdate">取消修改</el-button>
<el-button type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
</div>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
样式图：
image.png
我这里使用了几个element的组件，Collapse 折叠面板、Card 卡片、Tree 树形控件。
虽然代码贴了这么多，但是只需要注意几个地方。
image.png
Collapse 折叠面板的chang事件
change(rid) {
//rid是当前角色id
if (rid) {
this.initAllMenus(rid);
}
},
initAllMenus(rid) {
this.getRequest("/api/system/basic/permiss/getAllMenu").then(resp => {
if (resp) {
//allmenus 所有的菜单
this.allmenus = resp;
console.log(this.allmenus)
//选中的菜单数据 防止有缓存先清空在赋值
this.checkedKeys = [];
//获得当前角色拥有的菜单
this.initSelectedMenus(rid);
}
})
},
//根据角色id 查询所拥有的菜单
initSelectedMenus(rid) {
this.getRequest("/api/system/basic/permiss/mid/" + rid).then(resp => {
if (resp) {
var arr = resp;//后台返回的id组成的数组
console.log("后台返回的id组成的数组")
console.log(arr)
var newArr = [];
var item = '';
arr.forEach(item=>{
this.checked(item,this.allmenus,newArr)
})
this.checkedKeys = newArr;
console.log("进行处理选择的菜单")
console.log(this.checkedKeys)
}
})
},
//回显处理
checked(id,data,newArr){
data.forEach(item => {
if(item.id == id){
if( item.children.length == 0 ){
newArr.push(item.id)
}
}else{
if( item.children.length !=0 ){
this.checked(id,item.children,newArr)
}
}
});
},
//修改
doUpdate(rid, index) {
let tree = this.$refs.tree[index];
let getHalfCheckedKeys = tree.getHalfCheckedKeys(); //父级id
let selectedKeys = tree.getCheckedKeys(false); //全选中时会将父级id传入
let allKey = getHalfCheckedKeys.concat(selectedKeys);
console.log("将父级id和子级id传入")
console.log(allKey)
let url = '/api/system/basic/permiss/?rid=' + rid;
allKey.forEach(key => {
url += '&menuIds=' + key;
})
this.putRequest(url).then(resp => {
if (resp) {
this.activeName = -1;
}
})
},
二、复制
上面贴了这么多，我是想让你们看的比较清楚。
let getHalfCheckedKeys = tree.getHalfCheckedKeys(); //父级id
let selectedKeys = tree.getCheckedKeys(false); //全选中时会将父级id传入
let allKey = getHalfCheckedKeys.concat(selectedKeys);
var arr = resp;//后台返回的id组成的数组
console.log("后台返回的id组成的数组")
console.log(arr)
var newArr = [];
var item = '';
arr.forEach(item=>{
this.checked(item,this.allmenus,newArr)
})
this.checkedKeys = newArr;
console.log("进行处理选择的菜单")
console.log(this.checkedKeys)
//回显处理
checked(id,data,newArr){
data.forEach(item => {
if(item.id == id){
if( item.children.length == 0 ){
newArr.push(item.id)
}
}else{
if( item.children.length !=0 ){
this.checked(id,item.children,newArr)
}
}
});
},
注意：保证this.allmenus必须有值。你们需要将this.allmenus改成你们自己变量。
image.png
image.png
1、2、3分别是所有、员工资料、人事管理的id。
7、9分别是基本资料、员工资料的id。
image.png
