表格嵌套表单验证

表格数据一般都是由后台获取到的，我们需要在原有的数据上添加输入框并填写验证时，每一个输入框都需要验证，这样的话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中定义变量