Vue + element实现动态显示后台数据到options的操作方法
更新时间：2021年07月27日 10:18:15 作者：李猫er
最近遇到一个需求需要实现selector选择器中选项值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实现动态显示后台数据到options的操作方法的文章就介绍到这了,更多相关Vue element动态options内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue.js实现数据动态响应，Vue.set的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文主要介绍了Vue简化用户查询/添加功能的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
Vue源码学习defineProperty响应式数据原理实现
这篇文章主要为大家介绍了Vue源码学习defineProperty响应式数据原理实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
vue-infinite-loading2.0 中文文档详解
本篇文章主要介绍了vue-infinite-loading2.0 中文文档详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
虚拟列表是一种技术，它只渲染用户当前可见的列表项，而不是渲染整个列表，这篇文章主要来和大家聊聊虚拟列表的原理与实现，希望对大家有所帮助2023-05-05
这篇文章主要介绍了vue a标签点击实现赋值方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Nuxt.js实战详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了.env在mode文件中如何添加注释详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论