el-tree数据回显，实现子级部分选中父级全选效果

2023-09-24 06:39:31

在el-tree中实现子级部分选中时父级不全选的方法：

使用递归算法来遍历树形结构：
- 递归遍历el-tree的数据，并为每个节点添加一个checked属性，用于标识该节点是否被选中。
- 在遍历过程中，如果遇到父节点，则根据其子节点的选中状态来更新父节点的checked属性。
- 如果父节点的所有子节点都被选中，则将父节点的checked属性设置为true；如果父节点的子节点部分选中，则将父节点的checked属性设置为false。
在el-tree组件的mounted生命周期钩子中调用递归算法：
- 在el-tree组件的mounted生命周期钩子中，调用递归算法来遍历树形结构并更新节点的checked属性。
在el-tree组件的check-change事件处理函数中更新父节点的checked属性：
- 在el-tree组件的check-change事件处理函数中，当某个节点的选中状态发生变化时，调用递归算法来更新该节点父节点的checked属性。
在el-tree组件的before-check事件处理函数中阻止父节点被选中：
- 在el-tree组件的before-check事件处理函数中，当用户尝试选中父节点时，阻止该操作并提示用户无法选中父节点。

以下是一个代码示例，演示了如何在el-tree中实现子级部分选中时父级不全选：

<template>
  <el-tree :data="treeData" checkable :default-expand-all="true" @check-change="handleCheckChange" @before-check="handleBeforeCheck"></el-tree>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const treeData = ref([
      {
        id: 1,
        label: '父节点1',
        children: [
          {
            id: 2,
            label: '子节点1-1',
          },
          {
            id: 3,
            label: '子节点1-2',
          },
        ],
      },
      {
        id: 4,
        label: '父节点2',
        children: [
          {
            id: 5,
            label: '子节点2-1',
          },
          {
            id: 6,
            label: '子节点2-2',
          },
        ],
      },
    ])

    const updateChecked = (data) => {
      data.forEach((item) => {
        const childrenChecked = item.children.every((child) => child.checked)
        if (childrenChecked) {
          item.checked = true
        } else {
          const someChecked = item.children.some((child) => child.checked)
          if (someChecked) {
            item.checked = 'indeterminate'
          } else {
            item.checked = false
          }
        }
        if (item.children) {
          updateChecked(item.children)
        }
      })
    }

    const handleCheckChange = (data, checked) => {
      updateChecked(treeData.value)
    }

    const handleBeforeCheck = (data, checked) => {
      if (data.children && data.children.length > 0) {
        return false
      }
    }

    return {
      treeData,
      handleCheckChange,
      handleBeforeCheck,
    }
  },
}
</script>