在使用 Antd 的 TreeSelect 树选择组件的时候，有时因为数据层级多，或者数据量比较大，不方便去循环处理一遍，这个时候就适合使用自定义字段去显示。
按照官方文档，设置了fieldNames属性，但是发现没作用，下拉框的文字一直显示不出来。
<template>
<div class="page-box">
<a-tree-select
allow-clear
style="width: 200px"
v-model:value="value"
tree-default-expand-all
:tree-data="treeData"
:field-names="{
key: 'id',
title: 'name',
value: 'value'
}"
>
</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>
异常
反复调试，尝试了以下的方法：
1、以为是属性名格式的问题，将:field-names改为fieldNames，但是没作用；
2、在:field-names里面加上了children的设置，依然没作用；
3、去官方文档示例里面复制相关代码，再修改，终于起作用了！
正常
原因是什么呢？其实很简单，就是官方文档的问题，有一个属性名写错了。
官方文档
刚开始我是对着《说明》那一栏去写的，所以设置了title属性，但是 Antd 实际使用的是label属性，所以匹配不到，根本没内容显示。
坑啊，官方文档都写成这样...o(╥﹏╥)o
