ElementUI Tree组件严格的遵循父子不互相关联的反显

check-strictly

在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false，当我们设置它为true时，父子级关系彻底不再关联。

那么涉及到的就是一个需求，如果用户勾选了某个层级后，它的子集我们不需要勾选，但是它的父级我们需要根据情况判断是否是半勾选或者是勾选状态。

<el-tree class="ztree" :expand-on-click-node="showChild"
         check-strictly v-loading="loading" ref="tree"
         :data="treeData" :props="defaultProps" node-key="id"
         :default-expanded-keys="curExpandKeys"
         :show-checkbox="isCheckBox" @check="checkChange"></el-tree>

checkChange(a) {
        const self = this
        const anode = this.$refs.tree.getNode(a)
        if (anode.checked) {//删除选中的
          this.setParentChecked(anode.parent)
        } else {//新增选中的
          this.deleteParentChecked(anode.parent)
          this.deleteChildChecked(anode.childNodes)
        }
      },
      setParentChecked(parent) {//如果不是全选中为父级添加半选状态，如果子集全选后，父级也要全选
        const fnode = this.$refs.tree.getNode(parent)
        const isAllChecked = fnode.childNodes.every(k => k.checked && k.indeterminate === false)//子集是否是全选
        if (!fnode.isLeaf) {
          fnode.indeterminate = !isAllChecked//子集是否是全选，如果子集全选，则半选状态为假
          fnode.checked = true
        }
        if (fnode.parent) {
          this.setParentChecked(fnode.parent)
        }
      },
      deleteParentChecked(parent, d = false) {//如果取消子节点的选中， 设置父级节点选中状态
        const fnode = this.$refs.tree.getNode(parent)
        const isAllChecked = fnode.childNodes.some(k => d ? (k.checked || k.indeterminate) : k.checked)//子集是否是全选
        if (!fnode.isLeaf) {
          fnode.indeterminate = isAllChecked//子集是否是全选，如果子集全选，则半选状态为假
          fnode.checked = isAllChecked
          if (fnode.parent) {//如果有父节点，则需要去判断父节点是否选中
            this.deleteParentChecked(fnode.parent, true)
          }
        }
      },
      deleteChildChecked(childNodes) {//删除子节点的勾选状态
        if (childNodes && childNodes.length > 0) {
          childNodes.map(k => {
            k.indeterminate = false
            k.checked = false
            this.deleteChildChecked(this.$refs.tree.getNode(k).childNodes)
          })
        }
      }