Vue + element实现动态显示后台数据到options的操作方法
短信预约 -IT技能 免费直播动态提醒
需求：
实现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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
