Ant Design Vue库中的树选择组件无法自定义后缀图标

使用 Ant Design Vue库时，想要把树选择后面的图标改变，但一直不成功

在官方文档里，树选择组件是可以改变后缀图标的，官方的代码如下

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-tree-select
      v-model:value="value"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="Please select"
      allow-clear
      tree-default-expand-all
      :tree-data="treeData"
    >
      <template #suffixIcon><SmileOutlined />template>
    a-tree-select>
  a-space>
template>
<script>
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  components: {
    SmileOutlined,
  },
  setup() {
    const value = ref();
    const treeData = ref([{
      title: 'parent 1',
      value: 'parent 1',
      children: [{
        title: 'parent 1-0',
        value: 'parent 1-0',
        children: [{
          title: 'my leaf',
          value: 'leaf1',
        }, {
          title: 'your leaf',
          value: 'leaf2',
        }],
      }, {
        title: 'parent 1-1',
        value: 'parent 1-1',
      }],
    }]);
    watch(value, () => {
      console.log('select', value.value);
    });
    return {
      value,
      treeData,
    };
  },
});
script>

官服文档里图标是能换的

img

在我自己用树选择时，按照官方的方法就无效了，后缀图标直接消失了

我自己的代码如下

<a-col style="padding: 10px 6px 10px 5px">
                  <a-tree-select
                    v-show="userInfo.orgType !== 3"
                    v-model="params.departmentId"
                    :placeholder="$STR('hint.orgUser.searchByDept', '按部门搜索')"
                    :searchPlaceholder="$STR('hint.orgUser.inputDeptName', '请输入部门名称')"
                    :tree-data="depaTreeData"
                    show-search
                    treeNodeFilterProp="title"
                    :replaceFields="{
                      children: 'children',
                      title: 'name',
                      key: 'id',
                      value: 'id'
                    }"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    allow-clear
                    tree-default-expand-all>
                    <template #suffixIcon><SmileOutlined />template>
                  
                
//icon标签的引入也有写
import { SmileOutlined } from '@ant-design/icons-vue'
components: { AddDistributor, AddUser, DrawerPermission, Attrs, ModuleLayout, Upload, SmileOutlined },

但是就是不成功，后缀图标直接没了

img

该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据您提供的代码，您是将 SmileOutlined 组件作为树选择组件的 suffixIcon 属性，这是正确的做法。然而，您提到后缀图标直接消失了，这很可能是由于使用了错误的 replaceFields 属性值。
-
树选择组件的 replaceFields 属性是用来自定义树的节点数据的属性名称。根据您的代码，您使用了 { children: 'children', title: 'name', key: 'id', value: 'id' } 作为 replaceFields 属性的值，但是这些属性值可能与您的树数据的属性名称不匹配。
-
请确保您的 replaceFields 属性值正确地匹配了您的树数据的属性名称。例如，如果您的树数据中的子节点数组名称为 nodes 而不是 children，则您应该将 replaceFields 属性值更改为 { children: 'nodes', title: 'name', key: 'id', value: 'id' }。
-
如果您的 replaceFields 属性值正确，则建议您检查 SmileOutlined 组件是否已正确地导入，并确保它没有被其他样式覆盖。

你尝试 直接用 官网的例子试试