[Component] [tree-select] [Component] [TreeSelect ] TreeSelect 设置check-strictly="false后当子节点无children,子节点也可被选择

[xTreeRoot]

Bug Type: Component

Environment

• Vue Version: 3.3.4
• Element Plus Version: 2.3.12
• Browser / OS: UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
• Build Tool: Vite

Reproduction

Related Component

• el-tree-select

Reproduction Link

Element Plus Playground

Steps to reproduce

1.点击请选择仓库
2.点击TEST1分组（无法选择。正常）
3.展开TEST1分组
4.点击TEST2分组（无法选择。正常）
5.展开TEST2分组
6.点击11 （被选择。非正常）

What is Expected?

无法选择11

What is actually happening?

成功选择了11

Additional comments

(empty)

[Liao-js]

check-strictly 为 false 的时候，只有子节点（叶子结点）能被选中，是有什么问题吗？

[xTreeRoot]

check-strictly 为 false 的时候，只有子节点（叶子结点）能被选中，是有什么问题吗？

在我的场景里 ，这个11 其实是个分组（组是仓库组的概念） ，只是这个组下没有了children。 children是仓库的概念
我是选择框是为了收集仓库的id发送给服务端

我设想的check-strictly 只能选择仓库

我理解最终为什么能选择11，因为 11 这个分组已经没有children了 他被认为了是一个children

提这个issue是在想，能否提供其他的参数 让check-strictly分清层级 至少目前来看 我觉得check-strictly是不合理的

我最终的解决方案是 删除所有空的children&&type是group 的节点,得到一个处理好的数据

/**
 * 处理树形数据，删除children为null的节点
 * @param tree
 */
function removeEmptyGroupNodes(tree: IWarehouseGroupListParamVO[]): IWarehouseGroupListParamVO[] {
  return tree.reduce((acc: IWarehouseGroupListParamVO[], item: IWarehouseGroupListParamVO) => {
    // 如果当前节点有子节点，对子节点进行递归处理
    if (item.children && item.children.length > 0) {
      item.children = removeEmptyGroupNodes(item.children);
    }
    // 如果当前节点的children为null且type为'group'，则删除该节点
    if (item.children === null && item.type === 'group') {
      console.log('删除的节点', item);
      return acc; // 不将当前节点添加到累加器中
    }

    // 如果子节点数组被清空，且当前节点type为'group'，则不添加当前节点到累加器
    if (item.children && item.children.length === 0 && item.type === 'group') {
      console.log('删除的父节点', item);
      return acc;
    }

    // 否则，将当前节点添加到累加器中
    acc.push(item);
    return acc;
  }, []);
}

[Liao-js]

check-strictly 为 false 的时候，只有子节点（叶子结点）能被选中，是有什么问题吗？

在我的场景里 ，这个11 其实是个分组（组是仓库组的概念） ，只是这个组下没有了children。 children是仓库的概念 我是选择框是为了收集仓库的id发送给服务端

我设想的check-strictly 只能选择仓库

我理解最终为什么能选择11，因为 11 这个分组已经没有children了 他被认为了是一个children

提这个issue是在想，能否提供其他的参数 让check-strictly分清层级 至少目前来看 我觉得check-strictly是不合理的

我最终的解决方案是 删除所有空的children&&type是group 的节点,得到一个处理好的数据

/**
 * 处理树形数据，删除children为null的节点
 * @param tree
 */
function removeEmptyGroupNodes(tree: IWarehouseGroupListParamVO[]): IWarehouseGroupListParamVO[] {
  return tree.reduce((acc: IWarehouseGroupListParamVO[], item: IWarehouseGroupListParamVO) => {
    // 如果当前节点有子节点，对子节点进行递归处理
    if (item.children && item.children.length > 0) {
      item.children = removeEmptyGroupNodes(item.children);
    }
    // 如果当前节点的children为null且type为'group'，则删除该节点
    if (item.children === null && item.type === 'group') {
      console.log('删除的节点', item);
      return acc; // 不将当前节点添加到累加器中
    }

    // 如果子节点数组被清空，且当前节点type为'group'，则不添加当前节点到累加器
    if (item.children && item.children.length === 0 && item.type === 'group') {
      console.log('删除的父节点', item);
      return acc;
    }

    // 否则，将当前节点添加到累加器中
    acc.push(item);
    return acc;
  }, []);
}

是不是可以像这个 demo 一样，把所有选择框显示出来，然后通过禁用的方式，来禁止选择

[xTreeRoot]

是不是可以像这个 demo 一样，把所有选择框显示出来，然后通过禁用的方式，来禁止选择

是的，通过某个prop控制选择