element form父组件中有多个相同子组件表单校验、点击父

父组件

1.template中内容

<template>
    <div class="car-portrait-add">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="add-ruleForm">
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="vin" prop="vin">
                        <el-input
                            v-model.trim="ruleForm.vin"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="车型名称">
                        <el-input v-model.trim="ruleForm.vehicleType"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <hardsoftForm
            v-for="(hardware, index) in ecu_List"
            :key="index" 
            :hardwareInfo="hardware"
            :ref="'hardsoftFormDom' + index + 'H'">
        </hardsoftForm>
        <el-row :gutter="20">
            <el-col :span="10" class="">
                <el-button @click="submitForm">提交</el-button>
            </el-col>
        </el-row>
    </div>
</template>

2.data和methods

export default {
    data () {
        return {
            ruleForm: {
                vin: '', // 车辆VIN码
                vehicleType: '', // 车型
            },
            rules: {
                vin: { required: true, validator: validators.vin.bind(this), trigger: 'blur' },
                vehicleType: { required: true, validator: validators.vehicleType.bind(this), trigger: 'change' },
            },
            ecu_List: []
        }
    },
    methods: {
        submitForm () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const { vin, vehicleType } = this.ruleForm
                    let hard_flag = true
                    const ecuListData = []
                    this.ecu_List.map((val, idx) => {
                        if (val.hardSoftWareList.length) {
                            val.hardSoftWareList.map((value, index) => {
                                const hw_idx = 'hardsoftFormDom' + idx + 'H'
                                const hardFlag = this.$refs[hw_idx][0].formValidate()
                                if (!hardFlag) {
                                    hard_flag = false
                                    return false
                                }
                                const hardObj = this.$refs[hw_idx][0]._data.ruleForm
                                ecuListData.push(hardObj)
                            })
                        }
                    })
                    if (!hard_flag) {
                        this.$message.error('子组件有表单信息未填写')
                        return
                    }
                    const params = {
                        vin,
                        vehicleType,
                        ecuList: ecuListData
                    }
                    this.$ajax(url, params).then(res => {})
                }
            });
        }
    }
}

子组件

1.template中内容

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="220px" class="add-ruleForm">
        <el-form-item label="硬件号" prop="serialNumber">
            <el-input v-model.trim="ruleForm.serialNumber" placeholder="请输入"></el-input>
        </el-form-item>
    </el-form>
</template>

2.data和methods

export default {
    props: {
        hardwareInfo: {
            type: Object,
            default: () => {}
        },
        type: {
            type: String,
            default: 'add'
        }
    },
    data () {
        return {
            ruleForm: {
                serialNumber: '', // 硬件序列号
                partVersion: '' // 硬件版本号
            },
            rules: {
                serialNumber: { required: true, validator: validators.serialNumber.bind(this), trigger: 'blur' }
            }
        }
    },
    watch: {
        hardwareInfo (obj) {
            this.ruleForm = lodash.cloneDeep(obj)
        }
    },
    mounted () {
        this.ruleForm = lodash.cloneDeep(this.hardwareInfo)
    },
    methods: {
        formValidate () {
            let flag = false
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    flag = true;
                }
            })
            return flag
        }
    }
}