vue中表单中的数据添加到表格中

已于 2023-12-13 17:43:51 修改
阅读量3.4k 收藏 14
点赞数 2
分类专栏： vue练习题 文章标签： vue.js javascript 前端
于 2022-10-11 20:26:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58451019/article/details/127270942
版权

在这里插入图片描述

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
 		<script type="text/javascript">
 			window.onload = function() {
 				new Vue({
 					el: "#app",
 					data: {
 						UserData: [{
 							UserName: 'aa',
 							UserPassword: '111111',
 							UserCheicked: ['吃'].join(''),
 							UserAge:'18',
 							UserSex: '男',
 							UserHobby: '吃,喝',
 							UserCity: '驻马店',
 							UserText: 'bb',
 							UserOperation: ''
 						}],
 						Name: '',
 						Password: '',
 						Cheicked: ['吃'],
 						Age:'',
 						Sex: '男',
 						Hobby: '',
 						City: '南阳',
 						Text: '',
 						Operation: ''
 					},
 					methods: {
 						del:function(index){
 							this.UserData.splice(index,1)
 						},
 						add: function(index) {
 							this.UserData.push({
 								UserName: this.Name,
 								UserPassword:this.Password,
 								UserCheicked:this.Cheicked.join(','),
 								UserAge:this.Age,
 								UserSex:this.Sex,
 								UserHobby:this.Hobby,
 								UserCity:this.City,
 								UserText:this.Text,
 								UserOperation:this.Operation
 							}),
 							this.Name= ''
 							this.Password=''
 							this.Cheicked=['吃']
 							this.Age=''
 							this.Sex="男"
 							this.Hobby=''
 							this.City='南阳'
 							this.Text=''
 							this.Operation=''
 						}
 					}
 				})
 			}
 		</script>
 	</head>
 	<body>
 
 		<div id="app" class="text-center">
 
 			<table class="table table-striped table-hover table-light">
 				<tr>
 					<th>用户名</th>
 					<th>密码</th>
 					<th>性别</th>
 					<th>年龄</th>
 					<th>爱好</th>
 					<th>城市</th>
 					<th>文本域</th>
 					<th colspan="2">操作</th>
 				</tr>
 				<tr v-for="(item,index) in UserData">
 					<td>{{item.UserName}}</td>
 					<td>{{item.UserPassword}}</td>
 					<td>{{item.UserSex}}</td>
 					<td>{{item.UserAge}}</td>
 					<td>{{item.UserCheicked}}</td>
 					<td>{{item.UserCity}}</td>
 					<td>{{item.UserText}}</td>
 					<td ><button @click="item.UserAge++">修改年龄</button>{{item.UserOperation}}<button type="button" @click="del()">删除整行</button></td>
 				</tr>
 			</table>
 
 			<form method="get">
 
 				<table class="form-box w-50">
 					<tr>
 						<td>用户名：<input type="text" v-model="Name" class="form-control" /></td>
 					</tr>
 					<tr>
 						<td>密码：<input type="text" v-model="Password" class="form-control" /></td>
 					</tr>
 					<tr>
 						<td>性别：<input type="radio" checked="checked" v-model="Sex" name="sex" 
 								value="男" />男<input type="radio" name="sex" v-model="Sex"  value="女" />女
 						</td>
 					</tr>
 					<tr>
 						<td>
 							年龄：<input type="number" class="form-control" v-model='Age'>
 						</td>
 					</tr>
 					<tr>
 						<td>
 							爱好：
 							<input type="checkbox" v-model="Cheicked" value="吃" />吃
 							<input type="checkbox" v-model="Cheicked" value="喝" />喝
 							<input type="checkbox" v-model="Cheicked" value="拉" />拉
 							<input type="checkbox" v-model="Cheicked" value="玩" />玩
 						</td>
 					</tr>
 					<tr>
 						<td>
 							城市
 							<select v-model="City" name="">
 								<option class="form-control" value="驻马店">驻马店</option>
 								<option class="form-control" value="南阳">南阳</option>
 								<option class="form-control" value="郑州">郑州</option>
 							</select>
 						</td>
 					</tr>
 					<tr>
 						<td>
 							文本域：<textarea name="" class="form-control" v-model="Text" id="" cols="30" rows="10">Datas</textarea>
 						</td>
 					</tr>
 					<tr>
 						<td><button @click.submit.prevent="add()">添加</button></td>
 					</tr>
 					<tr>
 						<td><button>保存</button></td>
 					</tr>
 				</table>
 			</form>
 
 		</div>
 
 	</body>
 </html>
Asher呢
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
前端：表格内容的添加和删除
05-13
实现将输入的信息添加到表格、删除表格内容的功能，适合前端初学者巩固DOM相关知识。涉及全选、反选，几种表单标签的使用。
vue动态添加表单数据至表格中
weixin_52568554的博客
04-14 9509
vue动态添加表单数据至表格中 <div> <el-card> <div slot="header" class="tm"> <span>报废信息</span> </div> <!-- 表单 --> <!-- 时间设置 -->
使用vue构建一个上传图片表单
12-03
这篇博客也不知道起个什么名字比较好，毕竟刚开始学习vue，很多还不是很熟悉，一直在慢慢摸索中；之前也习惯了用jQuery写js代码，思维逻辑也要有个转换的过程。 1. 转变思维 使用vue编写代码，首先要做的就是转换思维，vue是一个数据驱动的框架，我们只需要操作数据，数据变化后，vue会自动改变DOM结构，而jQuery是直接操作DOM的。比如刚开始写的代码中犯的错误，有一个页面中的input标签是并列多个的，而且name属性的值是自增的，那么我就用v-for循环下，把index填充进去就行了，删除的时候根据index再进行删除。于是代码是这样的： html: <div id="app"
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详细分析vue表单数据的绑定
01-21
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。 二、 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message，表单数据变化data.message也发生变化 然后通过Mustache表达式，将变化之后的message数据显示到视图页面上 三、 效果 四、 深入 v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：
vue2 element-ui实现表格新增一条数据 并在表格里面编辑删除（并点击字段才会出现输入框 编辑 点击其他地方输入框消失）
最新发布
qq_44716001的博客
06-14 2437
【代码】vue2 element-ui实现表格新增一条数据 并在表格里面编辑删除（并点击字段才会出现输入框 编辑 点击其他地方输入框消失）
【vue】表单动态添加数据
Dreammin的博客
09-28 4765
如何做一个如图的表单动态添加数据？ 1、首先在return中定义一个数组，存放添加的数据 data() { return { stuList: [] //学生数组 } }, 2、点击新增按钮，则会在数组中添加一个学生对象，点击删除则会删除最后一行，所以需要写两个点击事件来控制。 <el-button @click="addStu">新增一列</el-button> <el-b
vue通过条件获取后台对应数据显示在表格
热门推荐
smilling sky的博客
05-23 3万+
先看运行结果： 正确结果图： 图1.运行界面图 图2.查询结果图 正确代码：（注:要想查看后台数据可以点击 https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata这个链接） < template> < div class=“show-examples”> < el-input p...
关于Ant Design of Vue中form表单编辑或新增后再次点击编辑或新增依然出现上一条数据问题
amy_victory的博客
01-13 3848
在使用Ant Design of Vue这个框架时，界面创建新增和编辑时，出现一个问题，就是新增信息保存后再新增一条信息发现上一条新增的记录还在form表单里并没有清除，不管怎么去清除数据依旧出现这个问题，还有编辑的时候也同样出现这个问题，编辑完一条信息后还编辑后者新增第二条信息依然出现的是上一条信息的数据在form里面，所以一定要仔细阅读官网文档，不然就容易踩了这个坑。其实这个问题不难解决。官网文档已经写好方法了 resetFields 重置一组输入控件的值（为 initialValue）与状态，
vue动态添加数据
qq_63608386的博客
11-20 3761
3，在新增按钮处点击添加往数组里面push相对应的值。1,先声明一个数组为响应式的，里面有一些数据。即可实现动态添加，不过刷新页面数据会恢复如初。我这里用的是表格的，是要动态添加表格。给表单绑定v-model。2，获取到需要新增的值。
vue动态表格添加删除数据特效代码
03-20
vue动态表格添加删除数据代码是一款输入用户名和年龄自由添加用户信息表格，可以删除用户信息，支持批量全部删除表格数据代码。
Vue.js在数组中插入重复数据的实现代码
01-19
1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by=$index来实现。 2、不使用track-by=”$index”的数组插入，数组不支持重复数据的插入       2.1  JavaScript代码 [removed][removed] [removed] [removed] = function() { vm = new Vue({ el: '#app', d
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下： HTML代码： 1.在处理人列加入一个下拉框模板，其中v-model必须要scope.row.proJbruserValue来绑定，意思是这个值绑定到当前行所选中的人；如果直接绑定proJbruserValue，将不能进行差异化选择，(这里scope
Vue+Element实现动态生成新表单并添加验证功能
10-16
主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue构建动态表单的方法示例
12-10
后台管理系统里面有非常多的表单需求，我们希望能够通过写一个json格式的数据，通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单的数据，可以对表单进行重置操作。我结合element ui的控件的...
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
11-21
横向添加 是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题 而纵向添加的数据，因为没有事先在 el-select v-modle=”” 里面定义好字段，定义好的option是通过v-for出来的(option是...
vue+element创建动态的form表单及动态生成表格的行和列
10-16
主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 往表格中添加数据完整demo
06-07
好的，以下是一个用 Vue.js 往表格中添加数据的完整示例： HTML 代码： ``` <div id="app"> <table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.email }}</td> </tr> </tbody> </table> <form v-on:submit.prevent="addPerson"> <label>Name:</label> <input type="text" v-model="newPerson.name"> <label>Email:</label> <input type="email" v-model="newPerson.email"> <button type="submit">Add Person</button> </form> </div> ``` Vue.js 代码： ``` new Vue({ el: '#app', data: { people: [ { name: 'Alice', email: '[email protected]' }, { name: 'Bob', email: '[email protected]' }, { name: 'Charlie', email: '[email protected]' } ], newPerson: { name: '', email: '' } }, methods: { addPerson: function () { this.people.push({ name: this.newPerson.name, email: this.newPerson.email }); this.newPerson.name = ''; this.newPerson.email = ''; } } }); ``` 这个示例中，我们使用了 Vue.js 的 `v-for` 指令来循环遍历 `people` 数组，并将每个人的名字和电子邮件地址显示在表格中。我们还创建了一个表单，让用户输入新的人员信息。当用户提交表单时，我们使用 `v-on:submit.prevent` 指令来阻止表单默认的提交行为，并调用 `addPerson` 方法。这个方法会在 `people` 数组中添加新的人员信息，并清空表单中的输入框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值