改变样式实现 ant design vue select 选项被选中

在Ant Design Vue Select组件中，如果你想改变选中项的样式，你可以通过自定义渲染函数（custom render）来实现。`Option`组件有一个`render`属性，可以接收一个返回Vue实例的函数，用于动态生成DOM。

下面是一个简单的例子，假设你想在选中时增加背景色：

<template>
  <a-select v-model="selectedValue" @change="handleChange">
    <a-option
      v-for="(item, index) in options"
      :key="index"
      :value="item.value"
      :render="optionRender"
    ></a-option>
  </a-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项...
      ],
    };
  },
  methods: {
    handleChange(value) {
      this.selectedValue = value;
    },
    optionRender(item) {
      return (
        <span style="{ background: item.isSelected ? 'lightblue' : '' }">{{ item.label }}</span>
      );
    },
  },
};
</script>

在这个例子中，当`isSelected`属性为true（即选项被选中）时，`optionRender`会添加一个蓝色背景。你可以根据需要调整样式。