Vue element-ui 实现后台数据动态显示到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-ui 实现后台数据动态显示到options
码云笔记 » Vue element-ui 实现后台数据动态显示到options