VUE+elementUI实现动态select下拉菜单

 vue小白一枚，练习过程中在elementUI官方文档中找了个遍发现只有静态下拉菜单，于是结合网上的内容，自己写了个动态的下拉菜单

---

HTML

 <el-form-item prop="cid" label="班级名称" :label-width="dialogFormLabelWidth">
          <el-select v-model="dialogForm.cid" clearable placeholder="请选择班级">
            <el-option
                v-for="item in allClasses"//定义item，在allClass中获取班级的id与cname
                :key="item.code"//使用变量key遍历
                :label="item.name"//在前端option框中展示的信息
                :value="item.code">//向后台传的数据
            </el-option>
          </el-select>
        </el-form-item>

 dialogForm.cid是绑定返回的表单的cid，对应后台的班级id

数据

data() {
    return {
      allClasses: [{//班级选择器
        id: '',//存储班级id
        name: '',//存储班级的名称
      }],
    }
}

 查询所有班级的方法，及页面加载时调用

created: function () {
    this.loadAllClasses();//页面加载时调用
},
methods: {
    //加载班级下拉菜单 所需的数据
    loadAllClasses() {
      this.allClasses = [];//将班级信息先置空
      this.axios({
        method: "GET",
        url: "/v1/student/getAllClasses"//后台方法的url路径，返回的数据为所有的班级实体
      }).then((res) => {
        if(res.data.code==200) {
          let tmp = res.data.data;//将表单信息提取
          for (let i = 0; i < tmp.length; i++) {//循环，表单的个数即为tmp的长度
            //将班级的名称赋给allClasses的name，id赋给allClasses的id，在通过上述的下拉菜单将显示的班级名称向后台传班级的id
            this.allClasses.push({name: tmp[i].cname, id: tmp[i].id});
          }
        }
      })
    },
}

 后台controller中的方法

    @GetMapping("/getAllClasses")
    public List<Classes> gAC(){
        List<Classes> classList = classesService.list();//list为MP框架封装好的方法
        return classList;
    }

效果：