elementUI接收后端返回的list对象集合渲染到Select

爱吃小鱼的虾米

于 2022-09-15 20:21:03 发布

阅读量972

点赞数 1

分类专栏： Vue 文章标签： mybatis 前端

本文链接：https://blog.csdn.net/qq_57961473/article/details/126878853

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

后端返回数据


    @ResponseBody
    @RequestMapping("/getKeyValue")
    public Result getKeyValue(){
        List<Student> list=StudentService.getKeyValue();
       return Result.success(list)
    }

前端接收代码

1<template>部分代码

  <el-row  >
            <el-col :span="6" :offset="9">
              <el-form-item label="类型：">
                <el-select v-model="form.type" placeholder="请选择"  style="width: 100%">
                  <el-option v-for="item in options"  :label="item.description" :value="item.dictionaryId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

2.export default部分代码

data() {
  return {
    options: []
  }
},

//页面加载时填充数据
  mounted() {
    this.getType();
  },
// 获取类型键值对
    getType(){
      this.$api.studenApi.getKeyValue()
      .then((res)=>{
        if(res.data.code===200){
          this.options=res.data.data;
        }
      }).catch((error)=>{
        this.$message.error(error.toString())
      }).finally(()=>{
        console.log("测试成功");
      })
    },