ant-design-vue下拉框多选自定义option

在 ant-design-vue 中，下拉框多选的自定义选项可以通过 `template` 和 `render` 方法来实现。

使用 `template` 的方式，可以在 `<a-select-option>` 标签内编写自定义的选项内容。例如：

<a-select v-model="selectedOptions" mode="multiple">
  <a-select-option v-for="option in options" :key="option.value">
    <span>{{ option.label }}</span>
    <a-checkbox v-model="option.checked"></a-checkbox>
  </a-select-option>
</a-select>

在上面的代码中，`options` 是一个数组，用于存储所有的选项。每个选项包含 `label` 和 `value` 属性，以及一个 `checked` 属性用于记录是否选中。通过循环遍历 `options` 数组，使用 `<a-select-option>` 标签来创建每个选项，并在其中放置自定义的内容。

使用 `render` 方法的方式更加灵活，可以直接通过 JavaScript 代码来生成自定义选项。例如：

<a-select v-model="selectedOptions" mode="multiple">
  <template v-for="option in options">
    <a-select-option :value="option.value" :key="option.value">
      {{ option.label }}
      <a-checkbox v-model="option.checked"></a-checkbox>
    </a-select-option>
  </template>
</a-select>

在上面的代码中，通过 `<template>` 标签来生成多个 `<a-select-option>` 标签，然后在其中使用 JavaScript 代码来设置 `value` 和 `key` 属性，并添加自定义内容。

需要注意的是，无论使用 `template` 还是 `render` 方法，都需要使用 `v-model` 来绑定选中的选项，以及在选项中设置 `value` 属性和 `key` 属性。另外，还可以根据具体需求在选项中添加其他自定义的组件或标签。