利用Vue+Element-ui实现简单的增删改功能

HTML部分

	
	
	
	


	

		

			
				
					
				
				
					
				
				
					
				
				
					
				    
				
			
			添加信息
		
		

			
		
		
		  

		  
			  
			    
			  
			  
			    
			  
			  
			    
			  
			  
			  		
				    
			    
			
		  
		  
		    取 消
		    确 定
		  
		
	
	
	
	
	
	
	

CSS部分

app{
	width: 1024px;
	margin: 0 auto;
}

.add-btn {
	margin-top: 20px;
	width: 100%;
}
.body{
	margin-top: 20px;
}

JS部分

new Vue({
	//绑定DOM节点
	el : '#app',
	//数据存储
	data : function(){
		return{
			//用户信息
			userInfo : {
				name : '',
				gender : '',
				phoneNum : '',
				birthday : '',
			},
			tableData: [{
            name: '小明',
            gender: '男生',
            phoneNum: '18448489797',
            birthday: '2010-12-09'
	        }],
	        dialogVisible: false,//弹框的显示
	        editObj:{
	        	name : '',
				gender : '',
				phoneNum : '',
				birthday : '',
	        },
	        userIndex:0,
		}
	},
	methods : {
		//添加用户信息
		addUser() {
			if(!this.userInfo.name){
				this.$message({
          		message: '请输入姓名!',
          		type: 'warning'
        		});
				return;
			}
			if(!this.userInfo.gender){
				this.$message({
          		message: '请输入性别!',
          		type: 'warning'
        		});
				return;
			}
			if(!this.userInfo.phoneNum){
				this.$message({
          		message: '请输入电话号码!',
          		type: 'warning'
        		});
				return;
			}
			if(!/^1[3456789]\d{9}$/.test(this.userInfo.phoneNum)){
				this.$message({
          		message: '请输入正确的电话号码!',
          		type: 'warning'
        		});
				return;
			}
			if(!this.userInfo.birthday){
				this.$message({
          		message: '请输入生日!',
          		type: 'warning'
        		});
				return;
			}
			this.tableData.push(this.userInfo);
			this.userInfo = {
				name : '',
				gender : '',
				phoneNum : '',
				birthday : '',
			};
		},
		//删除一组数据
		delUser(idx){
			this.$confirm('确认删除？')
		          .then(_ => {
		            this.tableData.splice(idx,1);
		          })
		          .catch(_ => {});
			},
		//编辑数据
		editUser(item,idx){
			this.userIndex = idx;
			console.log(item);
			this.editObj = {
	        	name : item.name,
				gender : item.gender,
				phoneNum : item.phoneNum,
				birthday : item.birthday,
	        };
	        this.dialogVisible = true;
		},
		handleClose(){
			this.dialogVisible = false;
		},
		//提交按钮
		confirm(){
			this.dialogVisible = false;
			Vue.set(this.tableData,this.userIndex,this.editObj)
			// this.tableDate[this.userIndex] = this.editObj;
		}
		
	}
})