element ui 循环表单验证,每层循环可单独提交验证

381 阅读1分钟
<el-form

    v-for="(container,index) in ContainerList2"

    :key="index"

    :ref="'Data'+index"

    :model="ContainerList2[index]"

    :rules="rulesVGM"

    label-width="100px"

>

<el-card class="box-card">

    <div class="Item">

        <el-row :gutter="10">

            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <!-- 需要验证的 -->

                <el-form-item label="箱号" :rules="rulesVGM.boxNub" prop="boxNub">

                <el-input v-model="container.boxNub" />

                </el-form-item>

            </el-col>

            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">

              <!-- 不需要验证的 -->
                <el-form-item label="称重方" prop="weighing">

                    <el-input v-model="container.weighing" />

                </el-form-item>

            </el-col>


        </el-row>

    </div>

    <div class="ItemBtn">

        <el-button

        type="primary"

        @click="NewSub(container,index)"

        >

    </div>

</el-card>

methods:{ //函数验证 NewSub(item, index) {

    this.$refs['Data' + [index]][0].validate((valid) => {
        if (valid) {

            console.log('验证成功')

        }

    })

}

}