ant-design-vue select 组件自定义 option

提醒：本文最后更新于 2024-03-25 22:59，文中所关联的信息可能已发生改变，请知悉！

antd 版本：v3+

a-select-option 用法：

<a-select v-model:value="value">
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

这种方法可以自定义 option 内容，但是需要 v-for 手动遍历渲染 a-select-option。

options 数组用法：

<template>
  <a-select v-model:value="value" :options="options">
    <template #option={label, value, 其他 options 数组对象中的属性}>
      <!-- 自定义 option -->
    </template>
  </a-select>
</template>

<script lang="ts">
const options = [{ label: '苹果', value: 'apple'},
  {label: '香蕉', value: 'banana'},
]
</script>

这种用法不需要手动遍历，直接在 option 插槽自定义即可。

在自定义下拉框内容的场景下也可以自定义 option 的展示，需要和 option 插槽配合：

<template>
  <a-select
    v-model:value="value"
    :options="options"
  >
    <template #dropdownRender="{menuNode: menu}">
      <!-- option 节点 -->
      <v-nodes :vnodes="menu" />
      <!-- 自定义内容 -->
    </template>
    <template #option={label, value, 其他 options 数组对象中的属性}>
      <!-- 自定义 option -->
    </template>
  </a-select>
</template>

<script lang="ts">
const options = [{ label: '苹果', value: 'apple'},
  {label: '香蕉', value: 'banana'},
]
</script>