在 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-plus2. 在 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?實現多種選擇（多選）的方法。你可以根據需要調整和擴展這些基本用法。
