el-select多选全选 vue3
时间: 2025-01-22 19:19:39 浏览: 61
### 实现 Vue 3 中 el-select 组件的多选和全选
在 Vue 3 和 Element Plus 库中,`el-select` 支持多选模式。为了实现全选功能,可以通过监听 `change` 事件并结合计算属性来控制选项的选择状态。
#### HTML 结构
```html
<template>
<div>
<!-- 多选框 -->
<el-checkbox v-model="isAllSelected" @change="handleCheckAllChange">全选</el-checkbox>
<!-- 下拉选择器 -->
<el-select v-model="selectedOptions" multiple placeholder="请选择">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</template>
```
#### JavaScript 部分
```javascript
<script setup>
import { ref, computed } from 'vue';
// 定义数据源
const options = [
{ value: 'option1', label: '黄金糕' },
{ value: 'option2', label: '双皮奶' },
{ value: 'option3', label: '蚵仔煎' }
];
let selectedOptions = ref([]);
// 计算是否全部选中
const isAllSelected = computed({
get() {
return selectedOptions.value.length === options.length;
},
set(value) {
handleCheckAllChange(value);
}
});
function handleCheckAllChange(val) {
if (val) {
// 如果勾选,则设置为所有项
selectedOptions.value = options.map(item => item.value);
} else {
// 取消全选则清空已选项
selectedOptions.value = [];
}
}
</script>
```
通过上述代码可以实现在 Vue 3 中使用 `el-select` 的多选以及全选效果[^1]。
阅读全文
相关推荐















