Vue + element實現動態(tài)顯示后臺數據到options的操作方法
更新時間：2021年07月27日 10:18:15 作者：李貓er
最近遇到一個需求需要實現selector選擇器中選項值options 數據的動態(tài)顯示，而非寫死的數據，本文通過實例代碼給大家分享實現方法，感興趣的朋友一起看看吧
需求：
實現selector選擇器中選項值options 數據的動態(tài)顯示，而非寫死的數據，我的角色ID數據如下：
現在實現把這些數據請求顯示option上
實現如下：
使用element-ui中selector 選擇器：
<el-form-item label="角色ID：" prop="roleId">
<el-select v-model="addUserForm.roleId" placeholder="請選擇角色ID">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
在data中自定義一個空數組：
在methods 中寫實現數據的請求：
getroleList() {
getRoleList(this.name).then(res => {
let result = res.data.items;
console.log("角色獲取列表：" +JSON.stringify(this.roleList));
result.forEach(element => {
this.roleList.push({label:element.name,value:element.name});
});
}).catch( error => {
console.log(error);
});
},
在created 實現顯示：
其中getRoleList 是我封裝的get請求：
實現結果如下：
到此這篇關于Vue + element實現動態(tài)顯示后臺數據到options的操作方法的文章就介紹到這了,更多相關Vue element動態(tài)options內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue.js實現數據動態(tài)響應 Vue.set的簡單應用
這篇文章主要介紹了vue.js實現數據動態(tài)響應，Vue.set的簡單應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了Vue簡化用戶查詢/添加功能的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
今天小編就為大家分享一篇vue: WebStorm設置快速編譯運行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Vue源碼學習defineProperty響應式數據原理實現
這篇文章主要為大家介紹了Vue源碼學習defineProperty響應式數據原理實現，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了vue.js實現單選框、復選框和下拉框示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue-infinite-loading2.0 中文文檔詳解
本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
虛擬列表是一種技術，它只渲染用戶當前可見的列表項，而不是渲染整個列表，這篇文章主要來和大家聊聊虛擬列表的原理與實現，希望對大家有所幫助2023-05-05
這篇文章主要介紹了vue a標簽點擊實現賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Nuxt.js實戰(zhàn)詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家介紹了.env在mode文件中如何添加注釋詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09