• 售前

  • 售后

热门帖子
入门百科

Vue + element实现动态显示背景数据到options的操作方法

[复制链接]
宇宙无限 显示全部楼层 发表于 2021-8-14 14:18:36 |阅读模式 打印 上一主题 下一主题
需求:

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

如今实现把这些数据哀求体现option上
实现如下:

利用element-ui中selector 选择器:
  1. <el-form-item label="角色ID:" prop="roleId">
  2.     <el-select v-model="addUserForm.roleId" placeholder="请选择角色ID">
  3.       <el-option
  4.           v-for="item in roleList"
  5.           :key="item.value"
  6.           :label="item.label"
  7.           :value="item.value">
  8.       </el-option>
  9.     </el-select>
  10. </el-form-item>
复制代码
在data中自界说一个空数组:

在methods 中写实现数据的哀求:
  1. getroleList() {
  2.    getRoleList(this.name).then(res => {
  3.      let result = res.data.items;
  4.      console.log("角色获取列表:" +JSON.stringify(this.roleList));
  5.      result.forEach(element => {
  6.              this.roleList.push({label:element.name,value:element.name});
  7.      });
  8.      }).catch( error => {
  9.        console.log(error);
  10.   });
  11. },
复制代码
在created 实现体现:

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

实现结果如下:

到此这篇关于Vue + element实现动态体现背景数据到options的操纵方法的文章就先容到这了,更多相关Vue element动态options内容请搜索草根技术分享从前的文章或继承欣赏下面的相关文章盼望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作