【Vue日常随笔】el-tree父子级不关联

Vue - 随笔记录

el-tree选择父级会自动选中子级所有信息，现在将父子级结点不关联

案例代码

<template>
  <el-tree
    ref="tree"
    :data="list"
    node-key="name"
    show-checkbox
    :props="defaultProps"
    highlight-current
    check-strictly
    @check="handCheck"
    @check-change="checkChange"
  />
</template>
<script>
export default {
  data() {
    return {
      list: [],
      defaultProps: {
        label: 'label',
        children: 'children'
      }
    }
  },
  method: {
    // 覆盖原有勾选功能，父与子关联，子与父不关联
    handCheck(data, node) {
      this.hanleCheck(data, node, 'tree')
    },
    hanleCheck(data, node, treeName) {
      const _this = this
      // 获取当前节点是否被选中
      const isChecked = _this.$refs[treeName].getNode(data).checked
      // 如果当前节点被选中，则遍历下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消
      if (isChecked) {
        // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
        data.children && data.children.length > 0 && setChildreChecked(data.children, true)
      } else {
        // 如果节点取消选中，则取消该节点下的子节点选中
        data.children && data.children.length > 0 && setChildreChecked(data.children, false)
      }
      function setChildreChecked(node, isChecked) {
        node.forEach(item => {
          item.children && item.children.length > 0 && setChildreChecked(item.children, isChecked)
          // 修改勾选状态
          _this.$refs[treeName].setChecked(item.name, isChecked)
        })
      }
    },
    checkChange(data, checked, indeterminate) {
      const _this = this
      // console.log(data, checked, indeterminate);
      // 选中全部子节点，父节点也默认选中，但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态
      const checkNode = _this.$refs.tree.getNode(data)// 获取当前节点
      // 勾选部分子节点，父节点变为半选状态
      if (checkNode.parent && checkNode.parent.childNodes.some(ele => ele.checked)) {
        checkNode.parent.indeterminate = true
      }
      // 勾选全部子节点，父节点变为全选状态
      if (checkNode.parent && checkNode.parent.childNodes.every(ele => ele.checked)) {
        checkNode.parent.checked = true
        checkNode.parent.indeterminate = false
      }
      // 如果取消所有第二节点的勾选状态，则第一层父节点也取消勾选
      if (checkNode.level == 2 && checkNode.parent.childNodes.every(ele => !ele.checked)) {
        checkNode.parent.checked = false
        checkNode.parent.indeterminate = false
      }
    }

  }
}
</script>

来源

来自csdn博客主分享：
[el-tree手动半选 父子节点不关联实现方案]( https://blog.csdn.net/weixin_59685936/article/details/127976307#:~:text=然后 前端 需要将两者进行匹配，然后追加到 el - tree 树形中。 其中子级全选时， ,tree%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E5%8E%9F%E7%90%86%EF%BC%8C%E5%BD%93%E5%AD%90%E7%BA%A7%E6%9C%AA%E5%85%A8%E9%80%89%E4%B8%AD%E6%97%B6%EF%BC%8C%20%E7%88%B6%20%E7%BA%A7%E6%98%AF%E4%B8%8D%E4%BC%9A%E9%80%89%E4%B8%AD%E7%9A%84%20%28%E6%AD%A4%E6%97%B6%E4%B8%BA%20%E5%8D%8A%E9%80%89%29%EF%BC%8C%E5%9B%A0%E6%AD%A4%EF%BC%8C%E6%AD%A4%E6%97%B6%E5%9C%A8%E4%BC%A0%E7%BB%99%E5%90%8E%E7%AB%AF%E7%9A%84list%E4%B8%AD%E6%98%AF%E6%B2%A1%E6%9C%89%20%E7%88%B6%20%E7%BA%A7%E7%9A%84%EF%BC%8C%E7%94%B1%E4%BA%8E "el-tree手动半选 父子节点不关联实现方案")