我之前也碰到过类似的情况——排序功能正常，但图标死活不出来，结合你的描述，咱们从几个核心方向来排查解决：

1. 确认排序图标已正确全局注册 #

虽然你说单独显示图标正常，但Ant Design Vue的Table组件会内部调用排序图标组件，如果这些图标没有全局注册，Table就没法渲染出对应的SVG结构。

如果你用的是手动引入，在项目入口文件（比如main.js/main.ts）里要显式注册排序用到的图标：

import { createApp } from 'vue'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

const app = createApp(App)
app.use(Antd)
// 必须注册这两个图标，Table内部依赖它们渲染排序状态
app.component('CaretUpOutlined', CaretUpOutlined)
app.component('CaretDownOutlined', CaretDownOutlined)
app.mount('#app')

如果用的是自动导入插件（比如unplugin-vue-components），要确保配置了Ant Design图标的解析规则，避免Table需要的图标被遗漏：

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from 'unplugin-icons/resolver'

export default {
  plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver(),
        IconsResolver({
          prefix: 'icon',
          enabledCollections: ['ant-design'],
          // 确保包含排序所需的两个图标
          filter: (name) => name.includes('CaretUp') || name.includes('CaretDown')
        }),
      ],
    }),
  ],
}

2. 给Table显式指定排序图标 #

如果注册没问题，还可以直接在Table组件里强制绑定你能正常显示的图标组件，绕过默认的内部调用逻辑：

方式一：全局配置Table的组件 #

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :components="tableComponents"
  >
    <template #name="{ record }">
      {{ record.name }}
    </template>
  </a-table>
</template>

<script setup>
import { h } from 'vue'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'

// 自定义Table的排序图标组件
const tableComponents = {
  table: {
    header: {
      cell: {
        sorter: {
          up: h(CaretUpOutlined),
          down: h(CaretDownOutlined)
        }
      }
    }
  }
}

// 你的列配置
const columns = [
  { 
    title: 'NAME', 
    dataIndex: 'name', 
    key: 'name', 
    sorter: (a, b) => a.name.localeCompare(b.name), 
    sortDirections: ['ascend', 'descend'], 
    scopedSlots: { customRender: 'name' }, 
    width: 250 
  }
]

const data = [/* 你的数据源 */]
</script>

方式二：单独给目标列配置图标 #

const columns = [
  { 
    title: 'NAME', 
    dataIndex: 'name', 
    key: 'name', 
    sorter: (a, b) => a.name.localeCompare(b.name), 
    sortDirections: ['ascend', 'descend'], 
    scopedSlots: { customRender: 'name' }, 
    width: 250,
    // 给当前列单独指定排序图标
    sorterIcon: {
      ascend: h(CaretUpOutlined),
      descend: h(CaretDownOutlined)
    }
  }
]

3. 修正CSS选择器，确保图标可见 #

你之前写的CSS选择器可能不够精准，Ant Design Vue的排序图标结构是.ant-table-column-sorter容器下的.anticon，试试用下面的样式强制让图标显示：

/* 确保排序图标容器不被隐藏 */
.ant-table-column-sorter {
  display: inline-flex !important;
  align-items: center;
  margin-left: 4px;
}

/* 升序/降序状态下的图标强制显示 */
.ant-table-column-sorter-up .anticon-caret-up,
.ant-table-column-sorter-down .anticon-caret-down {
  display: inline-block !important;
  color: #1890ff !important;
  font-size: 14px !important;
}

/* 鼠标悬停时显示图标（可选） */
.ant-table-column-sorter:hover .anticon-caret-up,
.ant-table-column-sorter:hover .anticon-caret-down {
  display: inline-block !important;
  color: #91d5ff !important;
}

4. 检查版本兼容性 #

如果以上都没用，确认一下你的Vue和Ant Design Vue版本是否匹配：

• Vue 3 → 必须搭配 Ant Design Vue 3.x 版本
• Vue 2 → 必须搭配 Ant Design Vue 1.x/2.x 版本

版本不兼容会导致很多奇怪的渲染问题，包括图标无法正常渲染。

内容的提问来源于stack exchange，提问作者Khairul Habib