需求:
实现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内容请搜索草根技术分享从前的文章或继承欣赏下面的相关文章盼望大家以后多多支持草根技术分享! |