spa项目之CUD+表单验证

表单验证

Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
并将Form-Item的prop属性设置为需校验的字段名即可

		
			
				
					
				
				
					
				
			
			

				取消
				保存
			
		

data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 0,
				title: '',
				editFormVisible: false,
				editForm: {
					title: '',
					body: '',
					id: 0
				},
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}]
				}
			};
		},

增删改功能实现

新增和修改

submitForm(formName) {
				/* 表单验证 */
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//移交后台数据
						let url;
						/* 判断调用新增或修改方法 */
						if(this.editForm.id == 0){
							url = this.axios.urls.SYSTEM_ARTICLE_ADD;
						}else{
							url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
						}
						this.axios.post(url,this.editForm).then((response) => {
							console.log(response);
							//操作成功后关闭框,并自动刷新
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});		
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}

删除

handleDelete(index,row){
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					alert('删除成功');
					//操作成功后关闭框,并自动刷新
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			}

全部代码

效果图