Uniapp表单提交

template中：

<template>
	<view class="">
		<button class="tianjia" @click="tianjia">添加</button>
		<view class="divOne" v-show="a">
			<text class="guanbi" @click="guanbi">X</text>
			<view class="divTwo">
				<text>姓名：</text>
				<input type="text" class="iptOne" v-model="xm">
			</view>
			<view class="clear"></view>
			<view class="divTwo">
				<text>年龄：</text>
				<input type="number" class="iptOne" v-model="nl">
			</view>
			<view class="clear"></view>
			<view class="uni-form-item uni-column">
				<radio-group name="radio" @change="handleSexChange">
					<text class="text1">性别：</text>
					<label>
						<radio value="男" /><text>男</text>
					</label>
					<label class="labs">
						<radio value="女" /><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column">
				<radio-group name="radio" @change="handleNationChange">
					<text class="text1">民族：</text>
					<label>
						<radio value="汉" /><text>汉族</text>
					</label>
					<label class="labs">
						<radio value="满" /><text>满族</text>
					</label>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column">
				<checkbox-group @change="handleHobbyChange">
					<text class="text1">爱好：</text>
					<label>
						<checkbox value="唱歌" /><text>唱歌</text>
					</label>
					<label class="labs">
						<checkbox value="跳舞" /><text>跳舞</text>
					</label>
					<label class="labs">
						<checkbox value="打篮球" /><text>打篮球</text>
					</label>
				</checkbox-group>
			</view>
			<button class="tijiao" @click="tujiao()">提交</button>
		</view>
		<table class="tab" border="1">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>民族</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in arr" :key="index">
					<td>{{item.xm1}}</td>
					<td>{{item.nl1}}</td>
					<td>{{item.xb1}}</td>
					<td>{{item.mz1}}</td>
					<td>{{item.ah1}}</td>
					<td><button class="shanchu" @click="shanchu(index)">删除</button></td>
				</tr>
			</tbody>
		</table>
	</view>
</template>

script中：

<script>
	export default {
		data() {
			return {
				xm: '',
				nl: '',
				sex: '',
				nation: '',
				hobbies: [],
				a: false,
				arr: [
					{ xm1: '小红', nl1: '18', xb1: '男', mz1: '汉', ah1: '唱歌' },
					{ xm1: '小花', nl1: '18', xb1: '女', mz1: '满', ah1: '唱歌，跳舞' }
				]
			};
		},
		methods: {
			handleSexChange(e) {
				this.sex = e.detail.value;
			},
			handleNationChange(e) {
				this.nation = e.detail.value;
			},
			handleHobbyChange(e) {
				this.hobbies = e.detail.value;
			},
			shanchu(index) {
				if (confirm('确定要删除吗?')) {
					this.arr.splice(index, 1);
				}
			},
			tujiao() {
				const obj = {
					xm1: this.xm,
					nl1: this.nl,
					xb1: this.sex,
					mz1: this.nation,
					ah1: this.hobbies.join(', ')
				};
				this.arr.push(obj);
			},
			tianjia() {
				this.a = true;
			},
			guanbi() {
				this.a = false;
			}
		}
	}
</script>

style中：

<style>
	.quxiao {
		width: 100px;
		float: left;
		margin-left: 20px;
		margin-top: 20px;
	}

	.queren {
		width: 100px;
		float: left;
		margin-left: 100px;
		margin-top: 20px;
	}

	.input1 {
		width: 300px;
		height: 30px;
		background: #fff;
		margin-top: 10px;
		margin-left: 20px;
		border-radius: 10px;
	}

	.box3 {
		width: 700rpx;
		height: 300px;
		background: rgba(0, 0, 0, 0.3);
		position: relative;
		top: -120px;
		margin: auto;
		border-radius: 10px;
		text-align: center;
	}

	.btn1 {
		width: 100px;
		clear: both;
	}

	.shanchu {
		width: 70px;
		height: 40px;
		background: indianred;
		color: #fff;
		margin: auto;
	}


	.tab {
		width: 750rpx;
		line-height: 30px;
		border-collapse: collapse;
		text-align: center;

	}

	.tijiao {
		width: 300px;
		margin: auto;
		margin-top: 20px;
		background: #e8909c;
		color: #fff;
	}

	.text1 {
		margin-top: 20px;
	}

	.labs {
		margin-left: 10px;
	}

	.uni-column {
		margin-left: 60px;
		margin-top: 10px;
	}

	.divOne {
		margin-top: 10px;
	}

	.iptOne {
		width: 300px;
		height: 50px;
		border: 1px solid #707070;
		border-radius: 10px;
	}

	.divTwo {
		margin-top: 10px;
		padding-left: 10px;
	}

	.divTwo text {
		float: left;
		line-height: 50px;

	}

	.divTwo input {
		float: left;

	}
.divTwo{
	margin-top: 10px;
}
	.clear {
		clear: both;
	}

	.guanbi {
		border: 1px solid #000000;
		padding: 2px 5px;
		border-radius: 10px;
		float: right;
		margin-right: 15px;
		margin-top: 10px;
		color: red;
	}

	.divOne {
		width: 750rpx;
		height: 340px;
		background: rgba(236, 236, 236, 0.5);
		border-radius: 10px;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.tianjia {
		width: 100px;
		height: 50px;
		line-height: 50px;
	}
</style>