場景

要實(shí)現(xiàn)的效果如下

?

官方示例代碼實(shí)現(xiàn)多選

為el-select設(shè)置multiple屬性即可啟用多選，此時(shí)v-model的值為當(dāng)前選中值所組成的數(shù)組。

默認(rèn)情況下選中值會(huì)以 Tag 的形式展現(xiàn)，你也可以設(shè)置collapse-tags屬性將它們合并為一段文字。

<template><el-select v-model="value1" multiple placeholder="請(qǐng)選擇"><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="請(qǐng)選擇"><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: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],value1: [],value2: []}}} </script>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

上面展示的實(shí)現(xiàn)效果首先在頁面添加一個(gè)el-select并設(shè)置其為multiple支持多選

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

這里在設(shè)置下拉框的數(shù)據(jù)源時(shí)使用的是czyOptions這個(gè)對(duì)象數(shù)組，需要提前聲明

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

為了給此數(shù)據(jù)源賦值

需要在created方法中調(diào)用加載下拉框數(shù)據(jù)的方法

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

調(diào)用getUserList方法請(qǐng)求后臺(tái)數(shù)據(jù)

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

其中l(wèi)istUser是請(qǐng)求后臺(tái)數(shù)據(jù)的方法

將返回?cái)?shù)據(jù)賦值給上面的對(duì)象數(shù)組。

這樣通過對(duì)下拉框進(jìn)行v-model數(shù)據(jù)綁定

?v-model="queryParams.czysz"

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。