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

需求：

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

現在實(shí)現把這些數據請求顯示option上

實(shí)現如下：

使用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中自定義一個(gè)空數組：

在methods 中寫(xiě)實(shí)現數據的請求：

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í)現顯示：

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

實(shí)現結果如下：

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