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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于Vue3更高效的构建工具Vite使用的相关资料,Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验,需要的朋友可以参考下2023-10-10
Vue双向绑定是指数据模型和视图之间的数据同步，通过Object.defineProperty()方法实现数据劫持，利用观察者模式实现数据更新和视图更新的自动同步，实现方式包括指令、计算属性、v-model等，优化方法包括使用虚拟DOM、合理使用computed和watch等2023-04-04
Vue引入路径正确但一直报错问题:Already included file name&n
这篇文章主要介绍了Vue引入路径正确但一直报错:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了element-ui select多选绑定回显值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最近项目开发中遇到一个需求,需要实现宽度自动适应,所以下面这篇文章主要给大家介绍了关于Vue前端项目自适应布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍的是Vue 组件组织结构及组件注册，为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的，文章学详细内容,需要的朋友可以参考一下2021-10-10
原生JS实现Vue transition fade过渡动画效果示例
这篇文章主要为大家介绍了原生JS实现Vue transition fade过渡动画效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue使用ElementUI动态修改table单元格背景颜色或文本颜色
本文主要介绍了Vue使用ElementUI动态修改table单元格背景颜色或文本颜色，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要给大家介绍了关于vue-router路由懒加载及实现的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要为大家详细介绍了vue仿ios列表左划删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论