欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-24 11:22:11
需求:实现selector选择器中选项值options 数据的动态显示,而非写死的数据,我的角色id数据如下:现在实现把这些数据请求显示option上实现如下:使用element-ui中selecto...

需求:

实现selector选择器中选项值options 数据的动态显示,而非写死的数据,我的角色id数据如下:

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

现在实现把这些数据请求显示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中自定义一个空数组:

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

在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 实现显示:

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

其中getrolelist 是我封装的get请求:

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

实现结果如下:

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

到此这篇关于vue + element实现动态显示后台数据到options的操作方法的文章就介绍到这了,更多相关vue element动态options内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!