vue3 el-select el-option 使用

在 Vue 3 中，el-select 是 Element Plus 组件库中的一个选择器组件，它允许用户从下拉菜单中选择一个或多个选项。如果你想在使用 Vue 3 和 Element Plus 时让 el-select 支持多种选择（即多选），你可以通过设置 multiple 属性来实现。以下是一些基本的使用方法和示例。

1. 安装 Element Plus

首先，确保你已经安装了 Element Plus。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install element-plus --save
# 或者
yarn add element-plus

2. 在 Vue 组件中使用 el-select

在你的 Vue 组件中，你可以这样使用 el-select 来支持多选：

<template><el-select v-model="selectedOptions" multiple placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script setup>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';const options = ref([{ value: '选项1', label: '黄金糕' },{ value: '选项2', label: '双皮奶' },{ value: '选项3', label: '蚵仔煎' },{ value: '选项4', label: '龙须菜' },{ value: '选项5', label: '南煎饼' }
]);const selectedOptions = ref([]); // 用于存储选中项的数组
</script>

3. 绑定值和事件处理

你可以通过 v-model 绑定一个数组来存储选中的值，这样就可以获取到所有选中的选项。如果需要处理选择变化的事件，可以使用 @change 事件：

<template><el-select v-model="selectedOptions" multiple @change="handleChange" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script setup>
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';const options = ref([...]); // 选项数据同上
const selectedOptions = ref([]); // 用于存储选中项的数组const handleChange = (value) => {console.log(value); // 打印当前选中的值数组
};
</script>

4. 使用 collapse-tags 属性显示已选项标签

Element Plus 的 el-select 组件还支持 collapse-tags 属性，该属性可以让你在选择框内显示已选择的标签，而不是在下拉菜单中：

<el-select v-model="selectedOptions" multiple collapse-tags placeholder="请选择"><el-option ...></el-option>
</el-select>

以上就是在 Vue 3 和 Element Plus 中使用 el-select 实现多种选择（多选）的方法。你可以根据需要调整和扩展这些基本用法。