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

需求:

实现selector选择器中选项值options数据的动态显示,而非写死的数据,我的角色ID数据如下:

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

现在实现把这些数据请求显示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中自定义一个空数组:

在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 实现显示:

created 实现显示

其中getRoleList 是我封装的get请求:

getRoleList 是我封装的get请求

实现结果如下:

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue element-ui 实现后台数据动态显示到options

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们