element ui 循环表单验证提交展示

1.表单

<el-form v-for="(item , index) in mainInfo" :model="mainInfo[index]" :ref="'mainInfoForm'+index" :rules="mainInfoRules" label-width="160px">
    <el-tag type="info" style="margin-left: 160px;margin-bottom: 2px">企业{{index+1}}</el-tag>
    <el-link type="primary" v-if="item.enterpriseId != enterpriseNo" style="float: right;margin-right:220px;" @click="deleteEnterpriseInfo(item.enterpriseId,index)">删除</el-link>
    <el-link type="primary" :class="`${item.enterpriseId != enterpriseNo?'btnFlag1':'btnFlag2'}`" @click="updateEnterpriseInfo(item.enterpriseId,index)">{{item.isEdite?'编辑':'保存'}}</el-link>
    <el-form-item label="企业注册名称" prop="enterpriseName">
        <el-input v-model="item.enterpriseName" :readonly="item.isEdite" placeholder="请填入企业注册名称" style="width: 62%;"></el-input>
        <el-checkbox v-model="item.isCheck" :disabled="item.isShowRegistered==1 || item.isEdite ?true:false" @change="toggleCheckbox(index)" style="margin-left:10px;">&nbsp;企业内部默认显示此名称</el-checkbox>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" :disabled="item.isRealed==1 || item.enterpriseId==''?true:false" @click="getIdentityUrl(item.isRealed)" style="width: 100%;">{{item.isRealed==1?'已实名认证':'申请实名认证'}}</el-button>
        <el-tag type="info" style="width: 100%;text-align: center;">完成企业认证后可开通您需要的所有业务模块,并且能申请电子印章</el-tag>
    </el-form-item>

    <el-form-item label="法人代表/负责人" v-if="item.enterpriseId == ''" prop="corporate">
        <el-input v-model="item.corporate" :readonly="item.isEdite" placeholder="请填入法人代表/负责人"></el-input>
    </el-form-item>
    <el-form-item label="法人/负责人身份证号" v-if="item.enterpriseId == ''" prop="corporateCardNo">
        <el-input v-model="item.corporateCardNo" :readonly="item.isEdite" placeholder="请填入法人/负责人身份证号"></el-input>
    </el-form-item>
    <el-form-item label="企业英文/中文名称" prop="">
        <el-input v-model="item.enterpriseDisplayName" :readonly="item.isEdite" placeholder="请填入企业英文/中文名称"></el-input>
    </el-form-item>
    <el-form-item label="国家/地区" prop="enterpriseArea">
        <el-select v-model="item.enterpriseArea" :disabled="item.isEdite" placeholder="请选择企业注册所在地" :class="prefix + '-select'">
            <el-option label="中国大陆" value="中国大陆"></el-option>
            <el-option label="中国香港" value="中国香港"></el-option>
            <el-option label="中国澳门" value="中国澳门"></el-option>
            <el-option label="中国台湾" value="中国台湾"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="营业执照/工商注册号" prop="businessNo">
        <el-input v-model="item.businessNo" :readonly="item.isEdite" placeholder="请填入企业营业执照/工商注册号"></el-input>
    </el-form-item>
    <el-form-item label="注册地址" prop="registerAddress">
        <el-input v-model="item.registerAddress" :readonly="item.isEdite" placeholder="请填入企业注册地址"></el-input>
    </el-form-item>
    <el-divider v-if="index != mainInfo.length -1"></el-divider>
</el-form>

2.script

export default {
    data() {
        return { 
            mainInfo:[
                {
    enterpriseId:' ',
    enterpriseName:'',
    corporate:'',
    corporateCardNo:'',
    enterpriseDisplayName:'',
    enterpriseArea:'',
    businessNo:'',
    registerAddress:'',
    isEdite:true,
              }
] ,

mainInfoRules: {
    enterpriseName: [
        { required: true, message: "企业名称不能为空", trigger: "blur" }
    ],
    enterpriseArea: [
        { required: true, message: "国家/地区不能为空", trigger: "blur" }
    ],
    businessNo: [
        { required: true,validator: checkBusinessNo, trigger: "blur" }
    ],
    corporate: [
        { required: true, message: "法人代表/负责人不能为空", trigger: "blur" }
    ],
    corporateCardNo: [
        { required: true,validator: checkCardNo, trigger: "blur" }
    ],
    registerAddress: [
        { required: true, message: "注册地址不能为空", trigger: "blur" }
    ]
}
  }
    }

}

 

3.新增删除，只需要控制mainInfo这个数组即可