element-ui default-checked-keys 会把节点下所有子节点全部勾选解决方法
<el-tree class="filter-tree" :data="permissionData" :props="props" node-key="id" ref="treeForm" show-checkbox :default-checked-keys="this.savedPermissionIds" :default-expanded-keys="this.savedPermissionIds" @check="getCheckedNodes" ></el-tree>
showDialog(id) { this.isShowPermissionTree = true; this.roleId = id; this.savedPermissionIds = []; this.getPermissionTree(); }, //获取用户勾选的权限id用于传参后台 getCheckedNodes() { // let selectedPermission = this.$refs.treeForm.getCheckedNodes(false, true); //(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false // this.permissionIds = selectedPermission.map(item => { // return item.id; // }); let parentArr = this.$refs.treeForm.getHalfCheckedKeys(); let childeArr = this.$refs.treeForm.getCheckedKeys(); let arr = childeArr.concat(parentArr); this.permissionIds = arr; }, //取消 cancel() { this.isShowPermissionTree = false; this.savedPermissionIds = []; this.getPermissionTree(); }, //获取树形权限列表 getPermissionTree() { menulistByPid({ flag: 1 }).then(res => { this.permissionData = res.body; //获取权限管理配置id并显示 getPermissionIds({ roleId: this.roleId }).then(res => { this.savedPermissionIds = res.body; let newArr = []; let item = ""; if (this.savedPermissionIds && this.savedPermissionIds.length !== 0) { this.savedPermissionIds.forEach(item => { this.checked(item, this.permissionData, newArr); }); this.savedPermissionIds = newArr; // console.log("this.savedPermissionIds111", this.savedPermissionIds); } }); }); }, checked(id, data, newArr) { data.forEach(item => { if (item.id == id) { if (item.items && item.items.length == 0) { newArr.push(item.id); } } else { if (item.items != null && item.items.length != 0) { this.checked(id, item.items, newArr); } } }); // console.log("newArr", newArr); },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步