1：效果图如下：2：实现过程（2-1）通过角色id获取需要的数据由于我的功能是给角色分配权限，这里都是通过获取分配的权限菜单和所有菜单roleid然后获取树形结构的菜单数据代码如下：{//获取当前用户角色分配菜单数据的id如：[1002,1003,1004,1213,1214,1000,1001]this.checkedKeys=res.data.data.checkedMenuId//获取所有的ids菜单数据如[1002,1003,1004,1213,1214,1000,1001]this.allMenuIds=res.data.data.menuIds//这一步是为了防止用户直接保存this.menuIds=res.data.data.checkedMenuId.join(',')returngetMenuTree()}).then(response=>{this.treeData=response.data.datathis.roleId=row.roleIdthis.permissionsConfirmLoading=false这。permissionsModalVisible=true})}(2-2)页面的配置代码如下：父子关联取消关联全部勾选全部取消全部展开全部折叠树操作cancalok(2-3)的对应的方法代码如下：//是否设置树组件父子关系switchCheckStrictly(v){if(v===1){this.checkStrictly=false}elseif(v===2){this.checkStrictly=true}},//是否设置树组件检查所有checkALL(){this.checkedKeys=this.allMenuIds},//是否设置树组件取消所有检查cancelCheckALL(){this.checkedKeys=[]},//所有树组件展开expandAll(){this.expandedKeys=this.allMenuIds},//所有树组件关闭closeAll(){this.expandedKeys=[]},//树组件展开triggersonExpand(expandedKeys){this.expandedKeys=expandedKeys},//点击树节点触发onTreeNodeSelect(id){if(id&&id.length>0){this.selectedKeys=id}},//点击复选框获取选中的复选框id+half-selectedidonChangePermissionsTree(node,event){if(this.checkStrictly){this.checkedKeys=node.checked}else{this.checkedKeys=node}},(2-4)lastsave//更新permissionsModalSubmit(){updPermissions(this.roleId,this.checkedKeys.join(',')).then(res=>{if(res.data.data){//resetRouter()store.dispatch('根erateRoutes')//刷新菜单//store.dispatch('GetInfo')//刷新用户权限this.permissionsModalVisible=falsereturnthis.$message.success('Savedsuccessful!')}else{returnthis.$message.error('保存失败!')}})},最后的data数据（懒得一一找出来了，自己取）roleId:'',checkStrictly:true,autoExpandParent:true,loading:false,roleModalTitle:'',roleModalType:0,roleModalVisible:false,permissionsModalVisible:false,roleConfirmLoading:false,permissionsConfirmLoading:false,formItemLayout:{labelCol:{xs:{span:24},sm:{span:5}},{xs:col:{span:24},sm:{span:13}}},//自定义分页pagination:{total:0,defaultPageSize:10,showTotal:total=>`共${total}条数据`,showSizeChanger:true,pageSizeOptions:['5','10','15','20'],onShowSizeChange:(current,size)=>(this.queryParam.size=size),onChange:(page,pageSize)=>this.onPageChange(page)},queryParam:{当前:1,大小:10,roleName:''},form:this.$form.createForm(this,'form'),treeData:[],allMenuIds:[],checkedKeys:[],selectedKeys:[],expandedKeys:[],
