大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

項目場景：

正如題目所說，今天在項目過程中遇到了個需求，因為需要在前臺展示運動員的名稱，但是運動員的編號在別的地方還需要使用，所以想了想，還是將編號和名稱一并添加到數據庫中，到時候拿的時候也比較方便。就不用在根據編號查詢一遍呢了（接口是外部的，重新查的話會影響效率）

使用的技術：element-ui的el-select標簽

問題描述：

下面是下拉列表展示的代碼：

<el-form-item label="人員名稱" ><el-selectv-model="fanganform.pbeizhu"multipleplaceholder="請選擇運動員":style="{width: '93%'}"><el-optionv-for="item in athlist":key="item.id":label="item.aname":value="item.id"></el-option></el-select></el-form-item>

效果如下：

要想獲取value值很簡單，直接提交表單，默認就是獲取的value，但是現在還需要獲取label的值，該如何獲取呢？

思路分析：

給下拉列表添加改變**@change**事件，當option選項改變時觸發，根據value值遍歷數據源中的name即可。

解決方案：

1.添加<el-select>的@change事件。

<el-form-item label="人員名稱" ><el-select@change="getPeoples"v-model="fanganform.pbeizhu"multipleplaceholder="請選擇運動員":style="{width: '93%'}"><el-optionv-for="item in athlist":key="item.id":label="item.aname":value="item.id"></el-option></el-select></el-form-item>

2.methods中，在getPeoples方法中寫遍歷數據源的代碼，然后給變量中賦值即可。

//獲取運動員名稱(根據選擇下拉列表)--添加方案getPeoples(val){var names = "";for(let i=0;i<=val.length-1;i++){this.athlist.find((item)=>{if(item.id == val[i]){names+=item.aname+",";}});}this.fanganform.ppersons = names;},

希望能幫助到你，今天的分享就到這里啦，我們明天在見。

總結

以上是生活随笔為你收集整理的vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？的全部內容，希望文章能夠幫你解決所遇到的問題。

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