在使用 Antd 的 TreeSelect 树选择组件的时候，遇到了一个问题，就是选了节点之后，显示的是节点的value，而不是文字。
话不多说，直接上代码。
<template>
<div class="page-box">
<a-tree-select
multiple
allow-clear
style="width: 200px"
v-model:value="value"
placeholder="请选择"
tree-default-expand-all
:tree-data="treeData"
:field-names="{
key: 'id',
title: 'name',
value: 'value'
}"
>
<template #title="{ name }">
<span>{{ name }}</span>
</template>
</a-tree-select>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { Ref } from 'vue';
let value: Ref<string> = ref()
const treeData: Ref = ref([
{
id: '1-1',
name: '企业',
value: 'enterprise',
children: [
{
id: '2-1',
name: '财政部',
value: 'finance',
children: [
{
id: '3-1',
name: '张三',
value: 'zhangsan'
},
{
id: '3-2',
name: '李四',
value: 'lisi'
}
]
},
{
id: '2-2',
name: '开发部',
value: 'tech'
}
]
}
])
</script>
<style scoped lang="less">
.page-box {
padding: 40px;
}
</style>
问题截图
原因是什么呢？我左思右想，找了很久都没找到答案，后来乱打乱撞，终于被我发现了问题所在，那就是官方文档写的有点问题。
先来看一下Antd官方文档的相关说明。
Select.png
Tree.png
TreeSelect.png
大家可以仔细看一下自定义字段里的相关属性说明，正确的来说，Tree用的是title，Select和TreeSelect用的是label，问题就出在这里，因为我在项目里同时使用到了这3个组件，期间不排除存在着代码复制，而且我一开始是对着组件《说明》那一栏去写的，所以给TreeSelect设置了title而不是label，这就导致了属性匹配不到，结果显示了value。
眼尖的同学可能已经发现，你为什么要同时设置fieldNames和<template #title={}>呢，这不是重复了吗？是的，因为一开始我是使用<template #title={}>来显示名字，后来才改为使用fieldNames，这个时候把<template #title={}>删掉就好。
但是如果这个时候没有设置正确的label，那就会出现显示空白，如下所示：
label空白
总结一下，出现上述问题基于3个点：
1、使用的组件是TreeSelect；
2、多选模式；
3、设置了title而非label。
那关于Select、Tree、TreeSelect这3个组件的显示属性怎么去记呢，其实很简单，只要记住有"Select"就用label，无"Select"就用title就好。
【注】最后补充说明一点，这个问题只在multiple多选模式之下才会出现，在单选模式下并不会出现，此刻的我又陷入了沉思......
