場景

要實現的效果如下

?

官方示例代碼實現多選

為el-select設置multiple屬性即可啟用多選，此時v-model的值為當前選中值所組成的數組。

默認情況下選中值會以 Tag 的形式展現，你也可以設置collapse-tags屬性將它們合并為一段文字。

<template><el-select v-model="value1" multiple placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-selectv-model="value2"multiplecollapse-tagsstyle="margin-left: 20px;"placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select> </template><script>export default {data() {return {options: [{value: '選項1',label: '黃金糕'}, {value: '選項2',label: '雙皮奶'}, {value: '選項3',label: '蚵仔煎'}, {value: '選項4',label: '龍須面'}, {value: '選項5',label: '北京烤鴨'}],value1: [],value2: []}}} </script>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

上面展示的實現效果首先在頁面添加一個el-select并設置其為multiple支持多選

??????? <el-selectv-model="queryParams.czysz"placeholder="請選擇操作員"multipleclearable:style="{ width: '200px' }"><el-optionv-for="dict in czyOptions":key="dict.userId":label="dict.userName":value="dict.userId"/></el-select>

這里在設置下拉框的數據源時使用的是czyOptions這個對象數組，需要提前聲明

? data() {return {// 操作員字典czyOptions: [],

為了給此數據源賦值

需要在created方法中調用加載下拉框數據的方法

? created() {this.getUserList();},

調用getUserList方法請求后臺數據

??? getUserList() {//獲取操作員數據listUser(this.user).then((response) => {this.czyOptions = response.rows;});},

其中listUser是請求后臺數據的方法

將返回數據賦值給上面的對象數組。

這樣通過對下拉框進行v-model數據綁定

?v-model="queryParams.czysz"

其中czysz是一個數組就能獲取到下拉框的:value="dict.userId"綁定的value值的數組。

總結

以上是生活随笔為你收集整理的ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。