当前位置:首页 » 《关注互联网》 » 正文

Vue + element 实现动态显示后台数据到options上_李猫er

6 人参与  2021年07月28日 12:23  分类 : 《关注互联网》  评论

点击全文阅读


需求:

实现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请求:
在这里插入图片描述

实现结果如下:

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/24165.html

数据  角色  请求  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 全书浏览口是心非在线(孟惜顾叙州)_口是心非在线(孟惜顾叙州)全书结局
  • 晒完婚戒后她说我抢她老公隐藏剧情_老公秦晓悦小姐精心编著_小说后续在线阅读_无删减免费完结_
  • 拒绝男友求婚后,他对我恨之入骨推文_陆鸣明里暗里高香知乎热门_小说后续在线阅读_无删减免费完结_
  • 东莞之行女神挣钱背后的真相(曹阳李燕)
  • 青山归杳处:结局+番外新上热文(周政良顾杳)全篇免费版在线+无障碍结局
  • 独家娇宠外室:结局+番外评价五颗星(娇宠外室)TXT免费版阅读
  • 全文重生后好孕冲喜女不嫁了(孟云曦陆朔)列表_全文重生后好孕冲喜女不嫁了
  • 做完流产手术后,我死心了完结爽文_叶青青青青小姐结局_小说后续在线阅读_无删减免费完结_
  • 往事藏匿枯鱼之肆精心打造全书童昭谢闻舟在线
  • (番外)+(全文)强势锁婚:惹火娇妻不太乖:结局+番外(苏念七霍盛霆)全文免费阅读无弹窗大结局_(强势锁婚:惹火娇妻不太乖:结局+番外免费阅读全文大结局)最新章节列表_笔趣阁(强势锁婚:惹火娇妻不太乖:结局+番外)
  • 相爱尽头是相忘陆时晏洛虞:全文+后续(相爱尽头是相忘):结局+番外_相爱尽头是相忘+结局最新章节列表_笔趣阁(相爱尽头是相忘陆时晏洛虞:全文+后续)
  • 和妹妹双重生后,她自毁双腿抢嫁童养夫小编推荐_沈临妹妹林雾完结版_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1