elementui大型项目中form表单校验总结

elementui表单校验在大型项目中的应用总结

vuex的使用

在vue+elementui项目中，可以使用vuex进行状态数据管理，可以查看这里：vuex介绍

elemenuit中表单的验证

首先要知道表单验证的基本例子： 可查看这里：elementui的form表单

其次要注意在写表单时候的一些特别重要的点： 可查看这里： elementui的表单校验注意点

在大型项目中，一个大型数据的保存，数据肯定会存在于很多子组件中，当点击保存时，怎样可以检测所有的表单元素呢？只写在一个form里肯定是不行的。

总结

将数据存放在不同的vue子组件中（或store共享中，均可）,将每个子组件中的refs可以存储到共享数据store中，每个子组件需在外层包裹一个表单el-form,并定义唯一的ref属性，那么在这些子组件调用的父组件中，可写保存方法

代码

父组件

//父组件
<template>
<div>
<child1></child1>
<child2></child2>
<child3></child3>
<el-button @click="save'>保存</el-button>
</div>
</template>
<script>
import child1 from '@/components/child1'
import child2 from '@/components/child2'
import child3 from '@/components/child3'
export default {
components: {
child1,
child2,
child3,
},
data(){
return {}
},
methods: {
save() {
console.log(this.$store.state.refs)
//循环判断refs中各表单的数据
let refs = this.$store.state.refs
let ok = 0
for(let  k in refs ) {
let el = refs[k]
if(el.validate) {
el.validate(valid => {
if(k==="child1"){
if(!valid) {
alert('child1信息未填写完成')
}
}
if(valid) ok++
return valid
})
}
}
if(ok !== 3) return
//继续其他内容
}
}
}
</script>

子组件

//子组件
<template>
<div>
<el-form :model="data" :rules="ruleForm" ref="child1">
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="姓名" prop="name">
<el-input v-model="data.name"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
data: {
name: ''
},
ruleForm: {
name: [{required: true, message:'必填信息',trigger:'input'}]
}
}
},
mounted() {
this.$store.state.refs.child1 = this.$refs.child1
}
}
</script>