欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue + element實(shí)現(xiàn)動(dòng)態(tài)顯示后臺(tái)數(shù)據(jù)到options的操作方法

 更新時(shí)間：2021年07月27日 10:18:15   作者：李貓er  
最近遇到一個(gè)需求需要實(shí)現(xiàn)selector選擇器中選項(xiàng)值options 數(shù)據(jù)的動(dòng)態(tài)顯示，而非寫死的數(shù)據(jù)，本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)方法，感興趣的朋友一起看看吧

需求：

實(shí)現(xiàn)selector選擇器中選項(xiàng)值options 數(shù)據(jù)的動(dòng)態(tài)顯示，而非寫死的數(shù)據(jù)，我的角色I(xiàn)D數(shù)據(jù)如下：

在這里插入圖片描述

現(xiàn)在實(shí)現(xiàn)把這些數(shù)據(jù)請(qǐng)求顯示option上

實(shí)現(xiàn)如下：

使用element-ui中selector 選擇器：

<el-form-item label="角色I(xiàn)D：" prop="roleId">
    <el-select v-model="addUserForm.roleId" placeholder="請(qǐng)選擇角色I(xiàn)D">
      <el-option
          v-for="item in roleList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
</el-form-item>

在data中自定義一個(gè)空數(shù)組：

在這里插入圖片描述

在methods 中寫實(shí)現(xiàn)數(shù)據(jù)的請(qǐng)求：

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 實(shí)現(xiàn)顯示：

在這里插入圖片描述

其中g(shù)etRoleList 是我封裝的get請(qǐng)求：

在這里插入圖片描述

實(shí)現(xiàn)結(jié)果如下：

在這里插入圖片描述

到此這篇關(guān)于Vue + element實(shí)現(xiàn)動(dòng)態(tài)顯示后臺(tái)數(shù)據(jù)到options的操作方法的文章就介紹到這了,更多相關(guān)Vue element動(dòng)態(tài)options內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論