表单+表格提交按钮向后台提交数据

最新推荐文章于 2023-08-03 15:01:43 发布

卖萌的小猪

最新推荐文章于 2023-08-03 15:01:43 发布

阅读量4.5k

点赞数 3

分类专栏： element-table类文章标签：向后台提交数据 vue表格表单

本文链接：https://blog.youkuaiyun.com/huihuiliu_/article/details/103125251

版权

本文介绍了一个Vue项目中，如何处理表格数据与表单数据的结合。当评委在前端页面打分后，点击提交按钮，将包含姓名、各项目指标得分及总分的数据提交至后台进行处理。详细内容包括HTML和JS代码实现以及提交后的效果展示。

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

1，首先我的表格数据都是读取后台接口出来的数据，表单数据是前端在页面输入才有，但是表格数据默认的都是0，但是通过评委在页面打分，点击提交按钮,把数据提交到后台，后台进行处理。

在这里插入图片描述

2，需要把姓名的表单数据，还有各个项目的指标的得分（在这里实际上是tableData的数据），总分，这些数据给提交到后台

3，HTML代码

<template>
  <div>
    <el-container>
      <h1>高能产品本部第十二届创新奖-设计创新奖大赛评比-上午场</h1>
      <el-header>
        <el-form ref="form" :model="form"
          label-width="80px"
          style="width: 80%;margin:0 auto"
        >
          <el-row style="margin-top:10px">
            <el-col :span="17">
              <el-form-item label=""> </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="姓名：" style="margin-left:10px">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入姓名"
                  style="width:80%"
                ></el-input>
              </el-form-item>
            </el-col>