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這個數組即可