elment tree 树组件 实现父节点选中,子节点不选中,子节点选中,父节点选中,子节点全部取消,父节点不取消,父节点取消,子节点全去选

1、带复选框的树组件必须设置:check-strictly=“true” :show-checkbox=“true” @check=“checkChange”

	 

2、在点击checkbox的方法里去设置父节点和子节点的

	// 通过check的回调里面获取节点id,再获取节点的node对象
	checkChange(data) {
      const node = this.$refs.tree.getNode(data.id)
      this.setNode(node)
    },
    //递归设置子节点和父节点
    setNode(node) {
      if (node.checked) {
      //如果当前是选中checkbox,则递归设置父节点和父父节点++选中
        this.setParentNode(node)
      } else {
      /如果当前是取消选中checkbox,则递归设置子节点全部取消选中
        this.setChildNode(node)
      }
    },
    //递归设置父节点全部选中
    setParentNode(node) {
      if (node.parent) {
        for (const key in node) {
          if (key === 'parent') {
            node[key].checked = true
            this.setParentNode(node[key])
          }
        }
      }
    },
    //递归设置子节点全部取消选中
    setChildNode(node) {
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach(item => {
          item.checked = false
          this.setChildNode(item)
        })
      }
    }

你可能感兴趣的:(vue,elment)