Uniapp添加删除示例

所有代码（以下）：

<!-- 添加删除 -->
<template>
 <view class="box1">
	 <button class="btn1" @click="tianjia()">添加信息</button>
	 <view class="box2">
		<table class="tab" border="1">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>民族</th>
				<th>爱好</th>
				<th>操作</th>
			</tr>
			<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()">删除</button></td>
			</tr>
		</table>
	</view>
		<view class="box3" v-if="aa">
			<input class="input1" type="text" placeholder="姓名" v-model="xm">
			<input class="input1" type="text" placeholder="年龄" v-model="nl">
			<input class="input1" type="text" placeholder="性别" v-model="xb">
			<input class="input1" type="text" placeholder="民族" v-model="mz">
			<input class="input1" type="text" placeholder="爱好" v-model="ah">
			<button class="quxiao" @click="quxiao()">取消</button><button class="queren" @click="querentianjia()">确定添加</button>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
		 arr:[{
			 xm1:'小红',
			 nl1:'18',
			 xb1:'女',
			 mz1:'汉',
			 ah1:'跳舞'
		 },
		 {
		 			 xm1:'小花',
		 			 nl1:'18',
		 			 xb1:'女',
		 			 mz1:'汉',
		 			 ah1:'跳舞'
		 }],
		obj:'',
		aa:false,
		name:'',
		xm:'',
			nl:'',
				xb:'',
				mz:'',
				ah:'',
				
			}
		},
		methods:{
			btn(){
				this.arr.push(this.name)
			},
			tianjia(){
				this.aa = true
			},
			quxiao(){
				this.aa = false
			},
			querentianjia(){
				 let obj = {
					 // xm1: this.xm,
					 xm1:this.xm,
				                        nl1: this.nl,
				                        xb1: this.xb,
				                        mz1: this.mz,
				                        ah1: this.ah,
				 
				                    }
				                    this.arr.push(obj)
				
			},
			 shanchu(a) {
			                    if (confirm('确定要删除吗')==true){
			                        this.arr.splice(a, 1) 
			                    }else{
			                        return false;
			                    }
			                    
			                }
		}
	}
</script>

<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;
	}
	.btn1{
		width: 100px;
clear: both;
	}
	.shanchu{
		width: 70px;
		height: 40px;
		background: indianred;
		color: #fff;
	}
	.box1{
		
	}
	.box2{
		display: flex;
		justify-content: center;
	}
	.tab{
		width: 700rpx;
		line-height: 30px;
		border-collapse: collapse;
	text-align: center;
		
	}
</style>