ant-design-vue select框样式

ant-design-vue的select组件提供了多种样式配置，您可以通过设置不同的属性来实现自定义样式。以下是一些常用的样式配置：

1. 修改下拉框的宽度：使用`dropdownStyle`属性，设置`width`属性。

<a-select v-model="selectedValue" :dropdownStyle="{ width: '200px' }">
  <a-select-option v-for="option in options" :key="option.value" :value="option.value">
    {{ option.label }}
  </a-select-option>
</a-select>

2. 修改下拉框中选项的样式：使用`option-template`属性，自定义选项的样式。

<a-select v-model="selectedValue" :option-template="optionTemplate">
  <a-select-option v-for="option in options" :key="option.value" :value="option.value">
    {{ option.label }}
  </a-select-option>
</a-select>

<template #optionTemplate="{ option }">
  <div class="custom-option">
    {{ option.label }}
  </div>
</template>

<style>
  .custom-option {
    color: red;
    font-weight: bold;
  }
</style>

3. 修改选中的选项的样式：使用`selected-template`属性，自定义选中的选项的样式。

<a-select v-model="selectedValue" :selected-template="selectedTemplate">
  <a-select-option v-for="option in options" :key="option.value" :value="option.value">
    {{ option.label }}
  </a-select-option>
</a-select>

<template #selectedTemplate="{ option }">
  <div class="custom-selected">
    {{ option.label }}
  </div>
</template>

<style>
  .custom-selected {
    color: blue;
    font-weight: bold;
  }
</style>

以上是一些常用的样式配置，您可以根据自己的需求进行自定义。