vue中element-ui表格嵌套表单使用并进行表单校验

最新推荐文章于 2024-09-23 09:54:04 发布

快起来搬砖了

最新推荐文章于 2024-09-23 09:54:04 发布

阅读量6.2k

点赞数 11

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44590591/article/details/117169178

版权

这篇博客探讨了如何在前端实现表格内嵌套表单的数据验证，特别是当表格数据从后台获取且需要对每个输入框进行验证时。通过动态设置`:prop`和`:rules`属性，实现了与每个需要验证的输入框对应的验证规则。博客中展示了使用`el-form`和`el-table`组件，结合`v-model`和`slot-scope`来处理动态表格数据，并提供了针对计价方式、数量和单价等字段的验证示例。

摘要由CSDN通过智能技术生成

表格嵌套表单验证

表格数据一般都是由后台获取到的，我们需要在原有的数据上添加输入框并填写验证时，每一个输入框都需要验证，这样的话rules的规则是不能匹配的，现在可以采用动态的prop和rules规则，对需要验证的输入框进行验证

注意：

:prop="'tableData.' + scope.$index + '.proType' "

:rules="form.rules.proType"（和每一个要验证的输入框对应）

<el-form ref="form" :model="form" :rules="form.rules">
              <el-table
                ref="singleTable"
                :data="form.tableData"
                class="theme"
                border
                :show-overflow-tooltip='true'
                style="width: 100%">
            <el-table-column type="index"
                             label="#"
                             width="50">
            </el-table-column>
              <el-table-column label="报价项目">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="'tableData.' + scope.$index + '.proName' "
                    :rules="form.rules.proName"
                    >
                    <el-input v-model="scope.row.proName" placeholder="输入报价项目"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              
              <el-table-column label="计价方式">
                <template slot-scope="scope">
                  <el-form-item  
                  :prop="'tableData.' + scope.$index + '.proType' "
                  :rules="form.rules.proType"
                  >
                    <el-select v-model="scope.row.proType"  placeholder="请选择计价方式">
                      <el-option v-for="item in sipm_ids"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
                    </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <el-form-item  
                  :prop="'tableData.' + scope.$index + '.proNum' "
                  :rules="form.rules.proNum"
                  >
                    <el-input
                      v-model.number="scope.row.proNum"
                      clearable
                      @keyup.native="handch(scope.row)"
                      @blur="scope.row.proNum = $event.target.value"
                      placeholder="请输入数量"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    >
                   </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="单价">
                <template slot-scope="scope">
                  <el-form-item 
                  :prop="'tableData.' + scope.$index + '.proPic' "
                  :rules="form.rules.proPic"
                  >
                    <el-input
                      v-model.number="scope.row.proPic"
                      clearable
                      @keyup.native="handch(scope.row)"
                      @blur="scope.row.proPic = $event.target.value"
                      placeholder="请输入单价"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    >
                   </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="总价">
                <template slot-scope="scope">
                  {{scope.row.money?scope.row.money:'---'}}
                </template>
              </el-table-column>


            </el-table>

在data中定义变量