1、实现效果:
2、前端html部分:
<el-form-item label="汽车类型" prop="type" >
<el-select v-model="ruleForm.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.id" :value="item.type">
{{item.type}}
</el-option>
</el-select>
注意:prop后面 "type" 为数据库表单中的字段;
v-model 是对数据的绑定。
3、JS部分:
options: [
// {
// id: '选项1',
// type: '轿车'
// }, {
// id: '选项2',
// type: '跑车'
// }
], //列表数据
注意:这里的数据可以直接在代码中写死,也可以在数据库中获取。
4、JS中的方法:
//选择下拉框
getOptions(){
axios.get("/car/cartypelist").then(res => {
console.log(res)
this.options = res.data.data.cartypeList;
});
},
注意:调用后台的接口,将查询到的数据返回给下拉列表。
对返回值没有做太多的处理(这里应该根据返回状态执行下一步操作)
提前加载数据
created() {
this.getOptions()
}
5、后端方法:
@RequestMapping(value = "/car/cartypelist", method = RequestMethod.GET)
public Result findCarType() {
List<CarType> carList = carService.findCarType();
if (carList != null) {
return Result.ok().data("cartypeList", carList);
} else {
return Result.error();
}
}
之后执行提交。
提交按钮:
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
6、调用后台的方法:
//提交表单
submitForm() {
let _this = this;
alert(_this.ruleForm.imageUrl)
axios.post('/car/addcar',this.ruleForm).then(resp => {
if(resp.data.code==200){
// alert("添加成功") 跳转的路由
_this.$alert('《'+_this.ruleForm.name+'》添加成功', '消息', {
confirmButtonText: '确定',
callback: action => {
_this.adddialogVisible=false
_this.showAllUsers();
}
});
}
});
},