vue3 自定义 ant-select 与 SelectOption样式

在 Vue3 中自定义 Ant Design 的 Select 组件以及其 `SelectOption` 样式，通常需要通过组件化的方式重构 Select 组件，并利用 CSS 或 SCSS 进行样式定制。以下是基本步骤：

1. **引入 AntD 组件库**：首先，在你的项目中安装 Ant Design Vue 组件库，如果还没有安装，可以使用 `npm install @ant-design/vue` 或者 `yarn add @ant-design/vue`。

2. **创建自定义 Select 组件**：
- 创建一个名为 `CustomSelect.vue` 的文件，导入 `Select` 组件并对其进行扩展，添加必要的属性和自定义样式。

   <template>
     <a-select :options="options" ref="customSelect" v-bind="$attrs" @change="handleChange">
       <!-- 添加其他你需要的选项如 placeholder、multiple 等 -->
     </a-select>
   </template>

   <script>
   import { Select } from '@ant-design/vue';

   export default {
     extends: Select,
     props: {
       // 额外的 prop 可以在这里定义
     },
     methods: {
       handleChange(value) {
         console.log('选中值', value);
       }
     },
     computed: {
       options() {
         // 定义选项数据，这里仅作示例
         return [
           { label: 'Option 1', value: 'option1' },
           { label: 'Option 2', value: 'option2' },
         ];
       }
     }
   };
   </script>

   <style scoped>
   /* 在这里添加自定义的 SelectOption 样式 */
   .custom-select-option {
     /* 例如修改字体颜色、背景等 */
     color: #666;
     background-color: #fff;
   }
   </style>

3. **使用自定义 Select**：
将自定义 Select 组件替换到你的 Vue 单元中，并传递所需的参数和样式：

   <custom-select placeholder="请选择" :options="options" class="custom-select"></custom-select>

使用 `.custom-select` 类名应用样式。