TreeSelect 组件 showCheckedStrategy 属性不生效问题

你脸上有BUG2025-12-24 22:37

背景

在使用 AntdV 的 TreeSelect组件时，发现设置showCheckedStrategy属性不生效，导致选中节点的显示格式不符合预期。

问题现象

当设置了 showCheckedStrategy为 TreeSelect.SHOW_ALL时，期望显示选中的节点以及它上层的父节点，期望回填显示：父节点1/父节点2/当前节点

问题原因

https://github.com/vueComponent/ant-design-vue/issues/2113

看到官方issue，一个已知问题，至今未修复...

解决方案

方案一： treeNodeLabelProp属性

通过指定一个自定义的属性来显示节点的完整路径信息，绕过原生的显示逻辑。

递归处理树数据，为每个节点添加完整路径

javascript 复制代码

const formatWithFullTitle = (nodes: any[], parentPath: string = ''): any[] => {
    return nodes.map(node => {
        const currentPath = parentPath ? `${parentPath} / ${node.name}` : node.name
        const formattedNode = {
            ...node,
            fullTitle: currentPath  // 添加完整路径属性
        }
        
        if (node.children && node.children.length > 0) {
            formattedNode.children = formatWithFullTitle(node.children, currentPath)
        }
        
        return formattedNode
    })
}

在 ATreeSelect 组件中配置

javascript 复制代码

<ATreeSelect
    v-model:value="selectedValue"
    :tree-data="formattedTreeData"
    treeNodeLabelProp="fullTitle"  <!-- 关键配置 -->
    :field-names="{
        children: 'children',
        label: 'name',
        value: 'id'
    }"
    show-search
    tree-default-expand-all
/>