elementUI之下拉选项加多选框功能实现vue3+ts

在Vue 3和TypeScript中，结合Element UI实现下拉菜单选项的多选功能，可以使用el-select组件配合multiple属性和el-option组件。以下是一个简单的示例：

<template>
  <el-select v-model="selectedValues" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const selectedValues = ref<string[]>([]);
    const options = ref([
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3' },
      // ...更多选项
    ]);
 
    return {
      selectedValues,
      options,
    };
  },
});
</script>

在这个例子中，selectedValues是一个响应式引用，它将保存所有选中的值。options数组包含下拉菜单的所有可能选项。使用v-model绑定selectedValues到el-select的v-model属性，并设置multiple属性来启用多选功能。每个el-option通过v-for创建，并通过:key、:label和:value绑定选项的唯一标识和显示的文本。

确保你已经安装了Element Plus（Element UI的Vue 3版本），并在你的Vue项目中正确引入。