el-tree懒加载遇到的问题 —— 默认选中前几个节点,父节点以及所有子节点也被选中

el-tree使用懒加载方式(由于数据量大)设置默认选中的是父节点的前两个子节点,展开时,发现父节点和所有子节点全选中了,于是打了一下debugger,发现点击展开时,默认走选中的前两个子节点,到第二个节点是时走了reInitChecked方法,父节点的checked属性变成了true,因为父节点变成了true,所以他又将所有子节点都变成了true(莫名其妙子节点还没渲染完就重置了父节点的状态);然后我尝试了一下默认选中父节点的第一个和第三个节点,发现没有问题呢
<template>
  <el-tree
    @node-click="handleNodeClick"
    :props="props"
    :load="loadNode"
    lazy
    show-checkbox
    node-key="id"
    ref="tree"
    :default-checked-keys="defaultKeys"
  >
  el-tree>


<script>
// 模拟接口
function getData(id) {
  console.log("执行了getData函数")
  // 一级菜单
  if (id === "000") {
    console.log("参数000")
    return [
      { id: 1, label: "一级 1", leaf: false },
      { id: 2, label: "一级 2", leaf: false },
      { id: 3, label: "一级 3", leaf: false },
    ]
  }
  // 二级菜单
  if (id === 1) {
    return [
      { id: 11, label: "二级 1-1", leaf: true },
      { id: 12, label: "二级 1-2", leaf: true },
      { id: 13, label: "二级 1-3", leaf: true },
    ]
  }
  if (id === 2) {
    return [
      { id: 21, label: "二级 2-1", leaf: true },
      { id: 22, label: "二级 2-2", leaf: true },
      { id: 23, label: "二级 2-3", leaf: true },
    ]
  }
  if (id === 3) {
    return [
      { id: 31, label: "二级 3-1", leaf: true },
      { id: 32, label: "二级 3-2", leaf: true },
      { id: 33, label: "二级 3-3", leaf: true },
    ]
  }
}
export default {
  data() {
    return {
      props: {
        label: "label",
        children: "zones",
        isLeaf: "leaf",
      },
      defaultKeys: [31, 32],
    }
  },
  methods: {
    loadNode(node, resolve) {
      console.log(node)
      // 第一次加载时,手动设置一下最顶级的菜单数据
      if (node.level === 0) {
        console.log("一一一级设置完成")
        return resolve([{ id: "000", label: "一一一级", leaf: false }])
      }
      // 之后每次点击展开,判断当前的节点是不是叶子节点,如果不是,就拿着当前被点击的id,去请求它的子节点
      if (node.data.leaf === false) {
        return resolve(getData(node.data.id))
      }
      // 如果是叶子节点,直接会退出,而且不会有下拉三角
    },
    handleNodeClick(data) {
      console.log(data)
    },
  },
  mounted() {},
}
script>

img

如图,我设置的默认选中节点是二级3-1和二级3-2,但是当我展开一级3的时候,一级3就会被选中,然后二级3-3也被选中了

想知道这个怎么解决

想要达到的效果:1.设置默认选中节点是二级3-1和二级3-2,当展开一级3时,二级3-3不要被选中 2.不展开一级3,选中一个其他节点如二级2-1,最后要拿到最终的值:二级3-1和二级3-2(默认选中的)+ 二级2-1的id

你的代码我拿过来运行,展开一级3的时候,一级3属于半选中状态,二级3-3并未选中

img


选中四个并没有错

出现展开当前节点其子节点被选中的问题一般是由于节点的id重复导致的。
你看你获取子节点数据的方法返回的数据节点是不是和上层的节点有重复的呢?关于树,节点一定要保证它的唯一性!!!
关于选中时拿到所有被选中节点的id:官网有提供getCheckedNodes方法,只要在节点被选中时触发,拿到的就是已被勾选的节点id组