vue3下antd组件a-tree-select树形选择器treeNodeFilterProp切换title值查询失败

bug复现

初始菜单

初始查询结果

原因定位

之前在vue2＋ant-design-vue@^1.7.4，使用时，将tree API的treeNodeFilterProp属性设置为title，就可以针对title属性值进行查询。
在新项目中应用了vue3＋ant-design-vue@^2.2.2，该属性设置无效，不能过滤数组了，不知道这是不是antd组件的bug，没有做到完全适配vue3。
因此，该换思路，官方的不能用，只能收到创造了

修改方法

通过filterTreeNode属性来修改树形组件的DOM节点，treeNode为单个树节点的vue虚拟dom，找到title值与用户输入值进行模糊查询，返回true or false来决定是否显示这个节点的内容。

<a-tree-select
  show-search
  style="width: 310px"
  allowClear
  :dropdownStyle="{ maxHeight: '400px', overflowY: 'auto',overflowX: 'hidden' }"
  placeholder="请输入标题名称关键字查询"
  treeDefaultExpandAll
  :treeIcon="true"
  @change="toPath"
  dropdownMatchSelectWidth
  :filterTreeNode="searchList"
>
  <template v-slot:suffixIcon>
    <svg-icon style="width: 13px; height: 13px" icon-class="search-icon" />
  </template>
  <a-tree-select-node
    v-for="item in serveParentList"
    :key="item.key"
    :value="item.value"
    :title="item.title"
  >
    <template v-slot:icon>
      <svg-icon
        style="width: 14px; height: 14px; position: relative; top: 1px"
        icon-class="search-parent"
      />
    </template>
    <template v-slot:title>
      <b style="font-size: 14px; color: #333333" >{{ item.title }}</b>
    </template>
    <a-tree-select-node
      v-for="item1 in item.children"
      :key="item1.key"
      :value="item1.value"
      :title="item1.title"
    >
      <template v-slot:icon v-if="item.children">
        <svg-icon
          style="width: 13px; height: 13px; position: relative; top: 1px"
          icon-class="search-children"
        />
      </template>
      <template v-slot:title>
        <b style="font-size: 13px; color: #666666" :title="item1.title">{{ item1.title }}</b>
      </template>
    </a-tree-select-node>
  </a-tree-select-node>
</a-tree-select>

方法实现

<script lang="ts">
  export default defineComponent({
    name: 'GlobalSearch',
    setup() {
      const dataMap = ref<any>({ serveParentList: [], serveList: []});
      const searchList = (searchVal: string, treeNode: any) => {
        return treeNode.props.title.children[0].children[0].children.includes(searchVal)
      }
      return {
        ...toRefs(dataMap.value),
        searchList
      };
    },
  });
</script>

使用treeNode.props.title.children[0].children[0].children原理

这个是根据创建的DOM节点内容去找到的，每个人需要的值可能不同
你可以在searchList 方法中打印出treeNode的值，去查询

console.log(treeNode)

console.log(treeNode.props.title.children[0].children[0].children)