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>