Vue element-ui 实现后台数据动态显示到options

需求：

实现selector选择器中选项值options数据的动态显示，而非写死的数据，我的角色 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-ui 实现后台数据动态显示到options的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。