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

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

          }

        });
      },
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值