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

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

HTML

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

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

数据

1.  
   data() {
2.  
   return {
3.  
   allClasses: [{//班级选择器
4.  
   id: '',//存储班级id
5.  
   name: '',//存储班级的名称
6.  
   }],
7.  
   }
8.  
   }

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

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

 后台controller中的方法

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

效果：

这篇好文章是转载于：学新通技术网