element plus,el-tree组件,父子节点不关联,自定义方法设置(子节点去掉勾选,不影响其他节点

15 阅读1分钟

element-plus的 tree组件

  1. 先去掉父子节点关联关系:check-strictly="true"
  2. 自己定义方法@check-change="handleCheckChange"

贴部分代码,主要就是下面三个方法

const menuTree = ref([]);
const menuRef = ref();
const isRendering = ref(false);

const checkAllChildren = (node, checked) => {
    if (node.children) {
      node.children.forEach(child => {
        menuRef.value.setChecked(child.id, checked, false);
        checkAllChildren(child, checked);
      });
    }
  };

  const findParent = (id, nodes) => {
    for (let node of nodes) {
      if (node.children) {
        for (let child of node.children) {
          if (child.id === id) {
            return node;
          }
          const parent = findParent(id, node.children);
          if (parent) {
            return parent;
          }
        }
      }
    }
    return null;
  };

  /**
   *
   * @param node 传递给 data 属性的数组中该节点所对应的对象
   * @param checked 节点本身是否被选中
   */
  const handleCheckChange = (node, checked) => {
    if (isRendering.value) {
      return;
    }

    if (checked === false) {
      // 子节点,取消选中
      checkAllChildren(node, false);
    } else {
      //否则(为选中状态)

      // 子节点,选中
      checkAllChildren(node, true);

      // 若有父节点,选中
      isRendering.value = true;
      let parent = findParent(node.id, menuTree.value);
      while (parent) {
        menuRef.value.setChecked(parent.id, true, false);
        parent = findParent(parent.id, menuTree.value);
      }

      nextTick(() => {
        isRendering.value = false;
      });
    }
  };

<el-tree
    ref="menuRef"
    :data="menuTree"
    :default-checked-keys="checkedKeys"
    :filter-node-method="filterNode"
    default-expand-all
    node-key="id"
    show-checkbox
    :check-strictly="true"
    @check-change="handleCheckChange"
  />

主要代码就在上面啦,不想写备注了