Ant design Vue 中的 a-select 组件自定义下拉框

Ant-design-vue使用select下拉选的时候想对下拉框的内容扩展，官网文档提示使用 dropdownRender 对下拉菜单进行自由扩展。

之前一直在使用ElmentPlus 对于ant的组件不是很熟悉，就做了一些尝试，如下是做了一个简单的表单。

基本上完成自己想要的效果

具体实现过程：

1 创建vue3项目

npm create vue@latest

2 引入ant-design-vue

npm i --save ant-design-vue@next

   main.js中引入

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp();
app.config.productionTip = false;

app.use(Antd);

3.创建Test.vue

<template>
    <div class="p-10 " style="width: 800px;margin: 0 auto;">
     <a-typography-title  :level="4" >自定义a-select组件</a-typography-title>
    </div>
</template>

<script setup>
import { ref, reactive, defineComponent, h } from 'vue'

</script>

<style lang="less" scoped>

</style>

使用ant的表单组件，具体select的具体使用：

<a-form layout="vertical"  
        :form-state="formState">
        <a-form-item label="标题">
            <a-input v-model:value="formState.title" placeholder="请输入标题" showCount :maxlength="100"  />
        </a-form-item>
    <a-form-item label="标签">
        <a-select
            v-model:value="formState.tags"
            show-search
            mode="multiple"
            style="width: 100%"
            placeholder="可选10个标签,支持搜索"
            :options="options"
            :forceRender="true"
            :dropdownMatchSelectWidth="false"
            >
            <template #menuItemSelectedIcon></template>
                <template #dropdownRender="{ menuNode: menu }">
                <div class="custom-dropdown">
                    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
                    <a-tab-pane tab="推荐" key="1">
                        <a-checkable-tag><VNodes :vnodes="menu" />
                </a-checkable-tag>
                    </a-tab-pane>
                    <a-tab-pane tab="热门" key="2">
                         <a-checkable-tag><VNodes :vnodes="menu" /></a-checkable-tag>
                    </a-tab-pane>
                    <a-tab-pane tab="活动" key="3">
                          <a-checkable-tag><VNodes :vnodes="menu" /></a-checkable-tag>
                    </a-tab-pane>
                    </a-tabs>
                </div>
                </template>
                                                    
            </a-select>
    </a-form-item>  
     <a-form-item label="内容描述" name="desc">
      <a-textarea v-model:value="formState.desc" />
    </a-form-item>
      <a-form-item >
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </a-form-item>

    </a-form> 

 js部分的数据：

<script setup>
import { ref, reactive, defineComponent, h } from 'vue'

// 更安全的 VNodes 组件
const VNodes = (_, { attrs }) => {return attrs.vnodes;}

const formState = reactive({ 
    title:'',
    tags: [] ,
    desc:''
})

const queAnswerTagList = [
  {
    name: "推荐",
    tagList: ["Bug", "求职", "项目", "学习", "技术"]
  },
  {
    name: "热门",
    tagList: ["AI", "区块链", "物联网", "大数据"]
  },
  {
    name: "活动",
    tagList: ["活动1", "活动2", "活动3", "活动4"]
  }
]

const options = ref(
  queAnswerTagList[0].tagList.map(item => 
    ({ value: item, label: item })
  )
)

const activeKey = ref('1')

const handleTabChange = (key) => {
  const index = parseInt(key) - 1
  options.value = [...queAnswerTagList[index].tagList]
    .map(item => ({ value: item, label: item }))
}
</script>

修改一些下拉选中的样式css:

// 下拉容器样式
:deep(.custom-large-dropdown) {
  .ant-select-dropdown-menu {
    max-height: none !important; // 禁用默认最大高度
  }
}
.custom-dropdown {
  max-height: 300px;
  overflow: hidden;

  :deep(.ant-tabs-content) {
    padding: 8px 0;
  }
  
  :deep(.ant-tabs-nav) {
    margin: 0 12px;
  }
  :deep(.ant-select-item-option){
     white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    //   line-height: 32px; /* 设置行高，确保单行显示 */
  } 
  :deep(.ant-tag-checkable:not(.ant-tag-checkable-checked):hover) {
  
    background-color: #fff;
  }
  :deep(.rc-virtual-list-holder-inner) {
    display: flex; 
    flex-direction: row !important;
    gap: 8px;

  }
  :deep(.ant-select-item-option-selected:not(.ant-select-item-option-disabled) ){
    /* color: rgba(0, 0, 0, 0.88); */
     font-weight: 500; 
    // font-size: 12px;
    color:#fff;
    background-color: #1890ff;
}
}