在 Vue 开发中，高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。
一、代码功能概述
这段代码创建了一个可多选的下拉框组件，通过el-select和el-checkbox-group结合的方式，实现了多个选项的选择功能。用户可以从给定的选项中选择一个或多个，并且可以通过selectChange方法实时更新已选择的值。
二、代码结构解析
- 模板部分
<template>
<el-select
v-model="selectData"
multiple
class="select-popover-class"
@change="selectChange">
<el-checkbox-group :model-value="selectData">
<el-option
v-for="item in options"
:key="item.value"
:value="item.value"
:label="item.label">
<el-checkbox :label="item.label" :value="item.value" />
</el-option>
</el-checkbox-group>
</el-select>
</template>
在模板中，使用了el-select组件并设置了v-model为selectData，表示选中的值。设置multiple属性允许用户进行多选。同时，通过@change事件绑定了selectChange方法，以便在选择发生变化时进行处理。内部使用el-checkbox-group和el-option结合的方式，遍历options数组生成每个选项，每个选项又包含一个el-checkbox。
2. 脚本部分
<script setup>
import { ref, computed } from 'vue'
const selectData = ref([1, 2])
const options = ref([
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
{ label: '选项3', value: 3 }
])
const flag = ref(true)
const selectChange = value => {
selectData.value = value
}
</script>
selectData是一个响应式变量，初始值为[1, 2]，表示默认选中的选项。options是一个包含选项对象的数组，每个对象有label和value属性，分别用于显示的文本和实际的值。flag是另一个响应式变量，其具体用途在这段代码中不太明确。selectChange方法用于更新selectData的值。
运行效果：
