Vue表格数据增删改查及搜索

<div id="app">
			<div class="item">
				<span class="name">Key:</span>
				<input type="text" name="" id="" v-model="search.key" class="ipt" />
			</div>
			<div class="form-group">
				<div>
					<label>Name:</label>
					<input type="text" class="ipt" name="" id="" value="" v-model="newPerson.name" />
				</div>
				<div>
					<label>Age:</label>
					<input type="" class="ipt" name="" id="" value="" v-model="newPerson.age" />
				</div>
				<div>
					<label>Sex:</label>
					<input type="" class="ipt" name="" id="" value="" v-model="newPerson.sex" />
				</div>
				<button @click="Add" class="add">添加数据</button>
			</div>
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Age</th>
						<th>Sex</th>
						<th>Delete</th>
						<th>Edit</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list" v-if="item.name.indexOf(search.key)>=0||item.age.indexOf(search.key)>=0||item.sex.indexOf(search.key)>=0">
						<td>{{item.name}}</td>
						<td :style="item.age>20 ?'color: red' : ''">{{item.age}}</td>
						<td>{{item.sex}}</td>
						<td><button @click="Delete(index)">Delete</button></td>
						<td><button @click="Edit(index)">Edit</button></td>
					</tr>
				</tbody>
			</table>
			<div v-if="show">
				<label>Name:</label>
				<input type="text" name="" id="name" :value="editData.name" v-model="editData.name" />
				<label>Age:</label>
				<input type="" name="" id="" :value="editData.age" value="" v-model="editData.age" />
				<label>Sex:</label>
				<input type="" name="" id="" :value="editData.sex" value="" v-model="editData.sex" />
				<button @click="Confirm(editData.index)">Confirm</button>
			</div>
		</div>

　　

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			#app {
				background: #2C3E50;
				color: #fff;
				padding: 20px;
			}
			
			.form-group {
				margin-bottom: 30px;
			}
			
			table {
				 100%;
				padding: 8px;
				text-align: center;
				color: #000;
				background: #E74C3C;
			}
			
			table tr {
				background: #F4F4F4;
				height: 40px;
				line-height: 40px;
				
			}
			table tr td{
				border-radius: 4px;
			}
			
			table tr th {
				background: #F1C40F;
				color: #fff;
				border-radius: 4px;;
			}
			
			table tr button {
				border: none;
				background: #F1C40F;
				border-radius: 4px;
				padding: 4px;
				color: #fff;
			}
			
			.item,
			.form-group {
				background: #E74C3C;
				padding: 10px;
			}
			
			.form-group {
				margin-top: 20px;
			}
			
			.ipt {
				 50%;
				height: 18px;
				line-height: 18px;
				border: none;
				border-radius: 4px;
				margin-bottom: 10px;
				padding: 4px;
			}
			
			.name,
			label {
				display: inline-block;
				 60px;
				font-size: 18px;
				height: 28px;
				line-height: 28px;
				margin-right: 5px;
				text-align: right;
			}
			
			.add {
				display: block;
				margin-top: 10px;
				margin-bottom: 10px;
				border: none;
				outline: none;
				border-radius: 4px;
				height: 28px;
				line-height: 28px;
				background: #F1C40F;
				color: #fff;
				text-align: center;
				 30%;
				margin: 0 auto;
			}
		</style>

　　

<script>
		new Vue({
			el: "#app",
			data: {
				search: {
					key: ''
				},
				newPerson: {
					name: '',
					age: '',
					sex: ''
				},
				list: [{
					name: 'An',
					age: '18',
					sex: 'female'
				}, {
					name: 'Bo',
					age: '18',
					sex: 'male'
				}, {
					name: 'Cin',
					age: '18',
					sex: 'male'
				}],
				editData: {
					name: '',
					age: '',
					sex: '',
					index: '',
				},
				show: false
			},
			methods: {
				Add: function() {
					this.list.push({
						name: this.newPerson.name,
						age: this.newPerson.age,
						sex: this.newPerson.sex
					});
					//重置数组
					this.newPerson = {
						name: '',
						age: '',
						sex: ''
					};
				},
				Delete: function(i) {
					this.list.splice(i, 1);
				},
				Edit: function(i) {
					this.show = true;
					this.editData.name = this.list[i].name;
					this.editData.age = this.list[i].age;
					this.editData.sex = this.list[i].sex;
					this.editData.index = i;
				},
				Confirm: function(i) {
					this.show = false;
					this.list[i].name = this.editData.name;
					this.list[i].age = this.editData.age;
					this.list[i].sex = this.editData.sex;
				}
			}
		})
	</script>