vue使用element-ui组件，通过el-form进行表单提交

最新推荐文章于 2025-03-07 15:53:14 发布

追梦d

最新推荐文章于 2025-03-07 15:53:14 发布

阅读量7.8k

点赞数 1

分类专栏： html vue 文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/jgp1234/article/details/120474380

版权

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

html

11 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI的el-form组件进行表单数据收集，并通过创建的api文件夹及request.js来定义接口路径，order.js存储具体接口。在表单提交时，利用FormData对象收集表单数据并调用接口进行提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建api文件夹，该文件夹中主要存放接口路径。新建request.js,该js主要用于接口存放路径。

import axios from 'axios'
/**
 * 封装axios请求
 */
// create an axios instance
const service = axios.create({
    baseURL: 'http://localhost:8001/order/',//本地请求路径
    timeout: 5000 // request timeout
})

// request 拦截器，
service.interceptors.request.use(
    config => {
        // do something before request is sent
        //TODO: 请求拦截器，如设置Token
        return config
    },
    error => {
        // do something with request error
        console.log(error)
        return Promise.reject(error)
    }
)

// 响应拦截
service.interceptors.response.use(

    response => {
        //TODO: 响应拦截器，可以统一处理返回响应码
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

2.新增order.js,里面主要存放接口

import request from '@/api/request'
//新增订单
export function add(data){
  return request({
    url:'order/add',
    method:'post',
    data:data,
    headers:{ "token": sessionStorage.getItem("token")}
  })
}

3.通过form表单提交调用该接口

  <!--新增-->
    <el-dialog title="增加"  :visible.sync="dialogApp">
      <el-form :model="form" @submit.native.prevent="showData">
        <el-form-item label="itemNo" :label-width="formLabelWidth" prop="itemNo">
          <el-input v-model="form.itemNo" autocomplete="off" show-word-limit ref="itemNo" name="itemNo"></el-input>
        </el-form-item>
        <el-form-item label="Gross Weight" :label-width="formLabelWidth" prop="brandName">
          <el-input v-model="form.brandName" autocomplete="off" show-word-limit ref="brandName" name="brandName"></el-input>
        </el-form-item>
        <el-form-item label="Quantity Per Package" :label-width="formLabelWidth" prop="originPlace">
          <el-input v-model="form.originPlace" autocomplete="off" show-word-limit ref="originPlace" name="originPlace"></el-input>
        </el-form-item>
        <el-form-item label="Net Weight" :label-width="formLabelWidth" prop="payment">
          <el-input v-model="form.payment" autocomplete="off" show-word-limit ref="payment" name="payment"></el-input>
        </el-form-item>
        <el-form-item label="packaging" :label-width="formLabelWidth" prop="packaging">
          <el-input v-model="form.packaging" autocomplete="off" show-word-limit ref="packaging" name="packaging"></el-input>
        </el-form-item>
        <el-form-item label="description" :label-width="formLabelWidth" prop="description">
          <el-input v-model="form.description" autocomplete="off" show-word-limit ref="description" name="description"></el-input>
        </el-form-item>
        <el-form-item label="deliveryTime" :label-width="formLabelWidth" prop="deliveryTime">
          <el-input type="number" v-model="form.deliveryTime" autocomplete="off" show-word-limit ref="deliveryTime" name="deliveryTime"></el-input>
        </el-form-item>
        <el-form-item>
          <input type="submit" value="确定" style="background-color: #409EFF;color: white;float: right;width: 89px;height: 40px;border: none">
        </el-form-item>

      </el-form>
    </el-dialog>

通过let formData=new FormData();进行form表单的提交

     methods:{

        showData(e){
          var itemNo=this.form.itemNo;
          var brandName=this.form.brandName;
          var originPlace=this.form.originPlace;
          var payment=this.form.payment;
          var packaging=this.form.packaging;
          var description=this.form.description;
          var deliveryTime=this.form.deliveryTime;
          let formData=new FormData();
          formData.append("itemNo",itemNo);
          formData.append("brandName",brandName);
          formData.append("originPlace",originPlace);
          formData.append("payment",payment);
          formData.append("packaging",packaging);
          formData.append("description",description);
          formData.append("deliveryTime",deliveryTime);
          add(formData).then(res=>{
            if(res.data.code=="0000"){
             this.dialogApp=false;
            }else{
              Message.error(res.data.message);
            }
          })
        }

}