封装一个基于Vue3 + Element Plus选择框的多选下拉框

<template>
  <el-select
    v-model="selectedValues"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
 
export default {
  components: {
    ElSelect,
    ElOption
  },
  setup() {
    const options = ref([
      { label: 'Vue.js', value: 'Vue' },
      { label: 'JavaScript', value: 'JavaScript' },
      // 更多选项...
    ]);
    const selectedValues = ref([]);
 
    return {
      options,
      selectedValues
    };
  }
};
</script>

这段代码定义了一个Vue组件，使用了Element Plus的el-select和el-option组件来创建一个多选下拉框。用户可以从预设的选项中进行选择，也可以输入新的选项并自动创建它。selectedValues是一个数组，包含了用户选择的所有值。