一、视图代码

 <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