vue3编写element ui下拉列表可多选

在 Element UI 中，可以使用 ElSelect 组件实现下拉列表，而多选功能可以通过设置 multiple 属性来实现。在 Vue 3 中，可以使用 Composition API 来编写组件，具体实现如下：

<template>
  <el-select v-model="selectedOptions" multiple>
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedOptions = ref([]);
    const options = [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' },
    ];

    return {
      selectedOptions,
      options,
    };
  },
};
</script>

在上面的代码中，我们使用了 ref 创建了一个响应式的数组 selectedOptions，用于存储用户选择的选项。同时，我们也定义了一个 options 数组，用于渲染下拉列表中的选项。在模板中，我们将 multiple 属性设置为 true，表示启用多选功能，并使用 v-model 指令将选中的选项与 selectedOptions 绑定起来。