技术文章内容聚合第一站
互联网技术教程 - 开发者的网上家园

Vue + element实现动态显示后台数据到options的操作方法

作者:web前端开发特约专   发布日期:2021-08-21 20:36:24   浏览: 000次   来源: Web开发  

本文由web前端开发特约专栏 于2021年08月21日 20时36分24秒编辑 本文给大家主要讲解的是:Vue + element实现动态显示后台数据到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内容请搜索互联网技术教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持互联网技术教程!

版权保护: 本文由互联网技术教程原创,转载请保留链接: https://jhrtech.cn/js/337527.html

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!