单页面内循环遍历的多个表单做校验（ui框架：elementui + uview）

最新推荐文章于 2025-04-10 23:30:00 发布

原创

最新推荐文章于 2025-04-10 23:30:00 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #uview

本文介绍了如何在基于Vue+ElementUI的网页端和UniApp+UView的移动设备端实现物资扫码后，右侧物资列表的表单校验功能。每个表单都需要校验必填项且数量大于1。网页端使用el-form和el-input-number组件，结合validate方法进行校验；移动端则利用u-form和u-number-box，通过Promise处理多个表单的校验。文章详细展示了具体代码实现和校验逻辑。

业务需求描述

界面展示：
本次组盘数为用户需要填写的表单项
同样格式的表单项会有多个用户每次在【物资扫码】成功后，都会在右侧【物资列表】中增加一个如图的结构（分为上中下三部分，上为【物资编号】，中为表格展示的物资基本信息，下为用户需要填写的表单项【本次组盘数】），需要在用户点击【保存】时，校验每一个表单项必填且数量大于1。

所用技术描述

客户要求该界面支持双端（网页端 + 移动设备端）
网页端采用：vue+elementui
移动设备端采用：uniapp+uview

网页端（vue+elementui）实现方式及具体代码

界面左侧就是简单的点击事件不做赘述，重点讲右侧的表单校验。

<el-col :span="18">
    <div class="main_div">
        <div class="table_item" v-for="(item,index) in tableData" :key="index">
            <div class="materials_div">
                <div class="materials_code">{
   
   {
   
   index + 1}} | 批次号：{
   
   {
   
   item.batchNum}}</div>
            </div>
            <div class="table_div">
                <div style="width:91%">
                		<!-- el-table组件接收一个数组，而tableData是一个对象数组，所以此处将遍历得到得对象转变为一个数组赋值给组件 -->
                		<!-- 此处可以写[tableData[index]] 也可以写 [item]，效果是一样的 -->
                    	<el-table 
	                         v-loading="loading" 
	                         :data="[tableData[index]]" 
	                         border 
	                         highlight-current-row
	                     >
                         <el-table-column label="物资类别" align="center" prop="materialsTypeName" />
                         <el-table-column label="物资名称" align="center" prop="materialsName" />
                         <el-table-column label="规格" align="center" prop="specs" />
                         <el-table-column label="数量" align="center" prop="repertoryNum" />
                         <el-table-column label="待组盘数量" align="center" prop="discNum" />
                         <el-table-column label="所属仓库" align="center" prop="storeId" :formatter="storeIdFormat" />
                         <el-table-column label="所属库区" align="center" prop="reserveId" :formatter="reserveIdFormat" />
                         <el-table-column label="备注" align="center" prop="remark" />
                     </el-table>
                </div>
                <div class="delte_btn" @click=

最低0.47元/天解锁文章