在vue中的form表单中下拉框中的数据来自数据库查询到的数据

文章目录

• • 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();
              }
            });

          }

        });
      },