vue el

#vue el| 来源: 网络整理| 查看: 265

一、目标：点击按钮，获取tree，并且勾选相应的节点。

二、实现：

1、写一个树

2、调用接口获得权限树

getSysAllRight(){ //获取权限树 getSysRightTree({sysAppId: this.sysAppId}).then(res=>{ if(!res) return this.treeData = res.content.list }) },

3、调用接口获取权限Id列表，并给权限树打勾

handleEdit(row) { //获取权限 getSysRoleModelAndRight({id: row.id}).then(res=>{ if(!res) return this.checkedRole = res.content.sysRoleRights //存放数据库已有的权限 this.selectedNodes = [...this.checkedRole] //存放选择项 this.$refs.tree.setCheckedKeys(this.checkedRole);//进行勾选 }) },

4、新勾选以后的节点保存

handleCheckChange(nodeData, checkedData) { this.selectedNodes = this.$refs.tree.getCheckedNodes() },

三、坑：

基本实现不难，但是后来发现，这里有个坑。

上面的实现，selectedNodes的获取是这样的：只要勾选了全部的子节点，那么parent节点的Id也会被自动勾选获取。

这个完全没有问题！问题是，如果勾选了子节点，parent节点也被获取到存起来了。那么下次我对这个树做了修改，新增了一个子节点。这个时候，再次获取勾选项的时候，由于之前存了了parent节点Id，因此获取到新tree的时候，在展示上，新增的子节点也被默认勾选了！但实际上，我们并没有勾选这个子节点。

四、解决坑：

思路：获取到树以后判断一下，如果勾选了parent节点，需要判断treeData里面的children节点是否都勾选了，因为有可能新增了节点。如果新增了节点，那么parent节点需要取消勾选，所以要找到需要去掉的parent节点。因为涉及到多个子节点，所以这里需要用递归函数去遍历。代码如下：

removeNofullChildParent(){ this.parentCancelNode = [] //存放需要取消的parentNode //第一次treeData没有数据 if(this.treeData.length!=0){ for(let i = 0; i < this.treeData.length; i++){ //得到没有被勾选的parentNode，即parentCancelNode this.checkParent(this.treeData[i].childRights, this.checkedRole, this.treeData[i].id); } } //如果checkedRole中存在parentCancelNode的节点删除 for(let j = 0; j < this.parentCancelNode.length; j++){ let index = this.checkedRole.findIndex(item => item == this.parentCancelNode[j]) if(index!=-1){ //如果匹配到删除 this.checkedRole.splice(index, 1) } } }, checkParent(childrenData, checkedRole, parentNode){ //如果子节点没有数据返回 if(childrenData.length == 0) return for(let i = 0; i < childrenData.length; i++){ let index = 0; for(let j = 0; j < checkedRole.length; j++){ this.checkParent(childrenData[i].childRights, checkedRole, childrenData[i].id) if(childrenData[i].id == checkedRole[j]){ //如果id相等 index++; } if(index == childrenData.length){ //如果等于的次数等于说明没有添加 return }else if(i == (childrenData.length-1) && j == (checkedRole.length-1) && index != (childrenData.length-1)){ this.parentCancelNode.push(parentNode) return } } } },

【本文地址】

公司简介

联系我们