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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    需要用到中间件的方式,这样就可以实现了我们想要的方式 publish-center.vue <template> <router-view></router-view> </template> <script> export default { } </script> <el-menu :default-active="$route.path" class="el-menu-vertical-dem

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

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

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

    需求: 实现selector选择器中选项值options 数据的动态显示,而非写死的数据,我的角色ID数据如下: 现在实现把这些数据请求显示option上 实现如下: 使用element-ui中selector 选择器: <el-form-item label="角色ID:" prop="roleId"> <el-select v-model="addUserForm.roleId" placeholder="请选择角

  • vue+element表格实现多层数据的嵌套方式

    目录 vue+element表格实现多层数据嵌套 这是完成之后的 方法   vue+element表格实现多层数据嵌套 今天用element的表格渲染了商城的购物车列表,element的表格之前也用到过,它把所有的东西都封装好了, 这是完成之后的    只需要往里面传数据就可以了,通过prop来拿到相对应的字段,非常方便,但是天不尽人愿呐,后台接口返回的数据   是嵌套多了一层,直接上图,后台返回的数据结构    data下面是店铺的名字和id,orderItemList是店铺下面的商品,店铺要

  • vue使用ajax获取后台数据进行显示的示例

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"&g

  • vue element table 表格请求后台排序的方法

    1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin

  • vue+layui实现select动态加载后台数据的例子

    刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一个小问题 有时候会提示render方法未定义 可能是由于执行顺序原因 vue先执行了 最后把vue代码放到layui.use里面 问题解决 可能不是最好的实现方式 如有更好的实现方式欢迎指出 共同进步 页面代码 <div id="demo"

  • vue element后台鉴权流程分析

    前言: 最近项目遇到一个管理系统,感觉权限配置挺有意思,记录一下流程实现的过程,便于自己学习以及整理思路,部分思路整合在代码的注释中: 路由拦截鉴权常用的两种方法 1:路由拦截:单纯给路由加字段标识符,通过路由拦截实现 2:动态路由:第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置 比较: 路由拦截实现方式比较简单,只需要简单的在router.beforeEach中根据路由配置信息过滤页面是否有权限前往改组件,若相对于的权限不够则不前往相应的组件 动态路由实现相对比较复杂,并且需要后

  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q

  • VUE+element开发后台管理的搜索功能

    VUE+element开发后台管理的搜索功能

    本文实例为大家分享了VUE element后台管理搜索功能的具体代码,供大家参考,具体内容如下 先看看样式图: 实现上面这种简单搜索简单的三步走: 1.页面样式:在页面中使用form表单的校验功能来实现输入搜索.给表单的数据放入搜索请求的data数组中,也就是searchParams这个大集合中. 备注:如果给每个输入框添加了搜索按钮的click方法,则会在输入完成后直接执行列表搜索.所以考虑自己使用的具体位置. <div class="search">     <e

  • vue element实现将表格单行数据导出为excel格式流程详解

    由于业务内容的需要,我们有时候需要将表格中的单行数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击单行导出按钮,导出数据为excel表格 如下图: 具体操作步骤如下: 1.下载按照依赖 npm install -D script-loader 2.在src文件夹的目录下方创建两个js文件 (1):Blob.js (2):Export2Excel.js 如下图: (Blob.js) (function (v

随机推荐