文章目录
-
- 1、实现的效果：
- 2、前端html代码
- 3、js中的代码
- 4、后端的方法
1、实现的效果：
增加一个新的类型到数据库
2、前端html代码
需要注意的部分：prop后边是表单中的字段
v-model:绑定的数据
<el-form-item label="上架时间" required>
<el-col :span="11">
<el-form-item prop="date">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<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>
</el-form-item>
3、js中的代码
这里的数据可以写死、也可以从数据库获得。（这里使用数据库中的数据）
options: [
// {
// id: '选项1',
// type: '黄金糕'
// }, {
// id: '选项2',
// type: '双皮奶'
// }
], //列表数据
js中的方法部分
调用后台的接口，将查询到的数据返回给下拉列表
对返回值没有做太多的处理（这里应该根据返回状态执行下一步操作。这里省略）
//选择下拉框
getOptions(){
axios.get("/car/cartypelist").then(res => {
console.log(res)
this.options = res.data.data.cartypeList;
});
},
提前加载数据
created() {
this.getOptions()
}
4、后端的方法
@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();
}
}
然后执行提交
这里是提交form表单的按钮
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
调用后台的方法
//提交表单
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();
}
});
}
});
},
