天天看点

el-tree只能勾选已选同层

最近有个需求,树结构选项,如果有已勾选节点了,后续只能勾选同一层级节点数据。

感觉可以记录下。

实现思路:

1.同一层级的上一节点(父节点)肯定是相同的。所以判断当前勾选的节点的父节点是否相同

2.如果没有已选节点则可以随意勾选节点

orgNodeChange(node,check,childCheck){
      this.selectOrgList = [];
      this.charForm.orgIds = [];
      let checkedArr = this.$refs.orgTreeRef.getCheckedNodes();
      let checkedKeys = this.$refs.orgTreeRef.getCheckedKeys();
      if(check){
        if(checkedArr.length>1){
          for(let i=0;i<checkedArr.length;i++){
            /*
            在已选节点中(包含最后次勾选不在原先同层节点的数据)判断当前勾选的节点是否跟原先的节点同层
            */
            if(node.dataId != checkedArr[i].dataId){
              this.lastTreeParentId = checkedArr[i].parentId;
            }
          }
          if(node.parentId != this.lastTreeParentId){
            this.$message.warning("选择的节点不在同一层级请重新选择");
            //移除已选中的并且不在同一层的节点
            this.$refs.orgTreeRef.setChecked(node.dataId,false,false);
            return;
          }else{
            this.selectOrgList = this.$refs.orgTreeRef.getCheckedNodes();
            this.charForm.orgIds = this.$refs.orgTreeRef.getCheckedKeys();
          }
        }else{
          this.selectOrgList = this.$refs.orgTreeRef.getCheckedNodes();
          this.charForm.orgIds = this.$refs.orgTreeRef.getCheckedKeys();
        }
      }else{
        if(checkedArr.length == 0){
          this.lastTreeParentId = null;
        }else{
          this.selectOrgList = this.$refs.orgTreeRef.getCheckedNodes();
          this.charForm.orgIds = this.$refs.orgTreeRef.getCheckedKeys();
        }
      }
    },
           

1.每次勾选节点时,都先获取已勾选的

node / key

。然后判断是否是勾选操作,进行同父id进行对比,这里的代码其实可以直接简化取

checkedArr

数组里第一个下标值就好了并记录父节点id。

2.判断当前勾选节点的父节点是否跟先前有已勾选的相同。

3.是相同的话重新获取过已勾选的

node / key

的方法

4.已选数组里为空则说明未存在已勾选节点,同样重新获取过树的获取节点方法

5. 判断为取消勾选时,如果树已经不存在勾选节点了,则把记录id的值设置null

继续阅读