vue3 elementui下拉框多选加checkbox

实现带有 Checkbox 的多选下拉框
在 Vue3 和 ElementUI 中实现带有 checkbox 的多选下拉框组件可以通过自定义 el-select 组件来完成。通过组合使用 el-select 和 el-option，并引入 el-checkbox-group 来处理多选逻辑。
HTML 结构与绑定数据源
创建一个多选下拉框的基础结构如下：
<template>
<div class="multi-select-container">
<!-- 使用 v-model 绑定已选择的数据 -->
<el-select v-model="selectedValues" multiple placeholder="请选择">
<el-checkbox-group v-model="checkedOptions">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
>
<span style="float: left">{{ item.label }}</span>
<el-checkbox :label="item.value"></el-checkbox>
</el-option>
</el-checkbox-group>
</el-select>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义选项数组
const options = [
{ value: 'option1', label: '黄金糕' },
{ value: 'option2', label: '双皮奶' },
{ value: 'option3', label: '蚵仔煎' }
];

// 已选择的值集合
const selectedValues = ref([]);
const checkedOptions = ref([]);

// 监听变化事件
watch(selectedValues, newValue => {
console.log('Selected:', newValue);
});
</script>
登录后复制
上述代码展示了如何构建一个基本的选择器[^1]。然而，在实际应用中可能还需要考虑更多细节，比如样式调整、性能优化以及用户体验改进等问题。
对于更复杂的场景，如需加入全选功能，则可以在原有基础上进一步扩展。一种常见的做法是在选项列表顶部添加一个特殊的 "全部" 或者 "全选/取消全选" 项，并监听其状态改变以同步更新其他子项的状态[^2]。
另外值得注意的是，当涉及到大量数据时，建议采用虚拟滚动技术或其他方式减少渲染开销；同时也要注意防止频繁触发不必要的重新计算或重绘操作影响效率[^4]。