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

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-inputv-model="form.userName"placeholder="请输入姓名"style="width:80%"></el-input></el-form-item></el-col><el-col :span="4"><el-form-item label="日期："><el-date-pickerv-model="value1"type="date"placeholder="请选择日期"></el-date-picker></el-form-item></el-col></el-row></el-form></el-header><el-main><div><el-tableborder:data="tableData"class="tb-edit"style="width: 80%;margin:0 auto"highlight-current-row><el-table-column label="项目名称" prop="ProjectName"></el-table-column><el-table-column:label="item.Indicate"v-for="(item, index) in HeadList":key="index"><template scope="scope"><el-inputsize="small"v-model="scope.row[item.IndicateCode]"placeholder="0"type="number"@change="handleEdit(scope.$index, scope.row, item.IndicateCode)"></el-input><span>{{ scope.row[item.IndicateCode] }}</span></template></el-table-column><el-table-column label="总分" prop="total"> </el-table-column></el-table></div></el-main><el-footer style="padding:0"><el-button type="primary" @click="Submit()">提交</el-button></el-footer></el-container></div>
</template>

4，JS代码

<script>
export default {data() {return {pickerOptions1: {disabledDate(time) {return time.getTime() > Date.now();}},value1: "",form: {userName: ""},//  表头数据HeadList: [],// // 表格数据tableData: []};},created() {this.getTableData();this.getHeadList();},methods: {// 合计事件handleEdit(index, row) {var sum = 0;this.HeadList.forEach(element => {sum += Number(this.tableData[index][element.IndicateCode]);});row.total = sum;},// 请求表头数据getHeadList() {//通过$axios发送http get请求this.$axios.get("/api/Indicator/get/projectType?=Morning").then(res => {this.HeadList = res.data;});},// 请求表格数据getTableData() {//通过$axios发送http get请求this.$axios.get("/api/project/get/projectType?=Morning").then(res => {res.data.map(val => {val.total = 0;});this.tableData = res.data;});},// 提交数据事件Submit() {let jsonData = {userName: this.form.userName,userData: this.tableData};this.$axios.post("/api/Score/Put/jsonData", jsonData).then(res => {console.log(res);});}}
};
</script>

4，提交后的效果

表单+表格提交按钮向后台提交数据相关推荐

使用Bootstrap-table创建表单，并且与flask后台进行数据交互
文章目录引用css和js 使用 html javascript flask mysql 参考引用css和js Bootstrap-table为这些文件提供了 CDN 的支持,所以不需要下载.js ...
php checkbox表单提交,HTML表单Checkbox的值如何正确提交到PHP后台？，需要技巧
Checkbox的值和其他input输入框的值一样,也是通过from提交到服务器后台,PHP再用全局变量 _POST,就能得到这些值.但checkbox有一点区别,有需要特别注意的地方,下面一起看下. ...
前端问题：button按钮在form表单的时候会当成submit提交
button按钮在form表单的时候会当成submit提交 input type="button" PS:遇到了一个坑是,button按钮在form表单的时候会当成submit提交 ...
html表单提交按钮代码,JavaScript在form表单中使用button按钮实现submit提交方法
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
留言提交成功页面html,织梦自定义表单自动获取用户IP、提交时间、留言页面的方法...
织梦的自定义表单功能很好用.下面讲解如何利用织梦自定义表单自动获取用户IP.提交时间.留言页面,并转发邮箱. 第一步,在织梦后台新建自定义表单.并添加字段:uname(姓名).utel(电话).uip ...
如何让form表单在enter键入时不提交
今天在做我的一个小玩意在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...
php js 防止重复提交表单,php如何防止form重复提交
php如何防止form重复提交引入cookie机制来解决(推荐学习:PHP编程从入门到精通) 用户提交表单到后端,在 Cookie 中做标记,指定时间内重复提交无效.但是用户禁用 Cookie 这个 ...
提交表单时，post方式无法提交（一种情况）
tomcat6,设置文件上传不限制大小maxPostSize="0" 但是在tomcat7及以后版本,应设置为小于0,如maxPostSize="-1" 否则 ...
表单reset重置按钮的作用并非是清空表单
不少初学者可能会认为表单元素的reset按钮是清空表单元素,其实并非如此. 看如下代码示例: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 ...

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

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

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

3，HTML代码

4，JS代码

4，提交后的效果

表单+表格提交按钮向后台提交数据相关推荐

最新文章

热门文章

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

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

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

3，HTML代码

4，JS代码

4，提交后的效果

表单+表格 提交按钮向后台提交数据相关推荐

最新文章

热门文章

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

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

表单+表格提交按钮向后台提交数据相关推荐