elementplus el-tree树型结构多选，选中全部子节点，父节点也默认选中，但是子节点取消勾选不会影响父节点勾选状态

文章目录

• • 概要
  • 实现代码
  • 效果展示

概要

el-tree树型结构多选：
实现选中父节点后，子节点全部选中，反之也会全部取消选中；
子节点选中时父节点也会选中，子节点取消选中不影响父节点选中状态，
但是子节点全部取消，父节点也会取消

实现代码

<template>
  <el-tree
    ref="treeRef"
    :check-strictly="true"
    :data="menuTreeList"
    show-checkbox
    node-key="id"
    highlight-current
    :default-checked-keys="checkedKeys"
    :props="defaultProps"
    @check="hanleCheck"
    @check-change="checkChange"
  />
</template>

<script lang="ts" setup>
import { onBeforeUpdate, ref } from "vue";

onBeforeUpdate(() => {
    // 清空选择状态
    treeRef.value!.setCheckedKeys([]);
})
const treeRef = ref();
const menuTreeList = ref<any>([]);//列表数组
const checkedKeys = ref<any>([]);//默认选中数组
const defaultProps = ref({});//配置选项
// 监听
const hanleCheck = (data: any, node: any) => {
  // 获取当前节点是否被选中
  const isChecked = treeRef.value!.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: any, isChecked: boolean) {
    node.forEach((item: any) => {
      item.children&&
        item.children.length > 0 &&
        setChildreChecked(item.children, isChecked);
      // // 修改勾选状态
      treeRef.value!.setChecked(item.id, isChecked, false);
    });
  }
  // 获取所有选中的节点 treeRef.value.getCheckedKeys();
};

const checkChange = (data: any, checked: boolean, indeterminate: any) => {
  // console.log(data, checked, indeterminate);
  // 选中全部子节点，父节点也默认选中，但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态
  let checkNode = treeRef.value!.getNode(data); //获取当前节点
  // 勾选部分子节点，父节点变为全选状态
  if (
    checkNode.parent &&
    checkNode.parent.childNodes.some((ele: any) => ele.checked)
  ) {
    checkNode.parent.checked = true;
    checkNode.parent.indeterminate = false;
  } else {
    checkNode.parent.checked = false;
    checkNode.parent.indeterminate = false;
  }
};
</script>

<style lang="scss" scoped></style>

效果展示