前端功能模块设计——资产领用申请

From表单

1. 设置form表单的样式,确定使用哪些标签

// 在一个from标签中，应该至少包含两个属性: action:要把form表单提交给谁,method:提交的方式                    
<form>
</form>

2. 设置输入框的规则验证

/*
	1、在<form-item>标签内添加规则
	2、在提交的方法中设置验证
*/
<el-form>
	<el-form-item 
		:rules={
			required:true,message:,trigger:
			}>
	</el-form-item>
</el-form>

<script>
	subForm(FormName){
		this.$refs[FormName].vaildate((vaild)=>{
			if(vaild){
				//验证成功后执行的规则
			}else{
				//验证失败后执行的规则   
				this.$message.error('错误提示')
				return false
			}
		})
	}
</script>

3. 重置表单内容

```java
/*
*  prop属性要写在el-form-item标签中,这样resetForm才可以起作用
*/
<el-form>
	<el-form-item v-model="data" prop="test"></el-form-item>
</el-form>
<el-button @click="resetForm('data')>重置</el-button>

resetForm(formName){
	this.$refs[forName].resetFields()
}

4. 动态增减表单项

/*
* 动态增减表单项
* indexOf(item):从数组中查找第一次出现并且值为item的下标并返回,若没有则返回-1
* splice(data1,data2):从下标为data1开始删除data2个元素
* push():将一个或者一组的数据添加到数组的末尾
*/
<div v-for="(item,index) in data" :key=""></div>
<el-button @click="addDomain">增加</el-button>
<el-button @click="removeDomain(item)">减少</el-button>
addDomain(){
	this.data.push({
	key:Date.now()
	});
},
removeDomain(item){
	var index =this.data.indexOf(item)
	if(index !==-1){
    	this.data.splice(index,1)
    }
}