在使用 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