vue element table中表单验证

element-ui 解决 table 里包含表单验证的问题

关键在于:prop="'table的data字段名.' + scope.$index + '.input字段名'" 然后v-model="scope.row.input字段名"

如下的:prop="'freightDetailList.' + scope.$index + '.price'" ，v-model="scope.row.price"

<el-form-item class="price" :prop="'freightDetailList.' + scope.$index + '.price'" :rules="formRules.twoDecimal">
  <el-input type="number" @change="changepaymentMethodPrice(scope.row,0)" v-model="scope.row.price"></el-input>
 </el-form-item>

//本文代码基于TypeScript
<el-form status-icon ref="editTotalprice" :model="editTotalprice" :rules="formRules" label-width="100px" class="demo-ruleForm">
    <el-row class="freightDetail">
      <el-col :lg="22" :sm="22">
         <div class="divEstimateConvertedFreight">
              <span>
                {{$t('order.orderAudit.detail.freightDetail')}}
              <span class="estimateConvertedFreight">({{$t('order.orderAudit.detail.estimatePayTotal')}})</span>
           </span>
            <el-button type="primary" plain size="mini" @click="addFreightDetail">添 加</el-button>
          </div>
          <el-table :data="editTotalprice.freightDetailList" border :row-class-name="tableRowClassName">
             <el-table-column prop="feeTypeStr" :label="$t('order.orderAudit.detail.feeType')"></el-table-column>
             <el-table-column prop="paymentMethod" :label="$t('order.orderAudit.detail.paymentMethod')">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.paymentMethod"  @change="changepaymentMethodPrice(scope.row,1)">
                       <el-option
                           v-for="item in paymentMethodTypeValue"
                           :key="item.key"
                           :value="item.value"
                           :label="$t(item.label)"
                         ></el-option>
                   </el-select>
                 </template>
             </el-table-column>
             <el-table-column prop="price" :label="$t('order.orderAudit.detail.Price')">
                <template slot-scope="scope">
                   <el-form-item class="price" :prop="'freightDetailList.' + scope.$index + '.price'" :rules="formRules.twoDecimal">
                      <el-input type="number" @change="changepaymentMethodPrice(scope.row,0)" v-model="scope.row.price"></el-input>
                      </el-form-item>
                </template>
             </el-table-column>
             <el-table-column :label="$t('list.command')" width="60" fixed="right" type='index'>
                <template slot-scope="scope">
                     <el-tooltip placement="top" class="item" effect="dark" :content="$t('list.delete')">
                        <el-button type="danger" icon="el-icon-delete"
                           circle
                           @click="deleteFreightRow(scope.row)"
                           plain>
                        </el-button>
                    </el-tooltip>
                 </template>
           </el-table-column>
     </el-table>
   </el-col>
  </el-row>
</el-form>

//本文代码基于TypeScript
public editTotalprice = {
    freightDetailList: []
}
public formRules = ｛
    twoDecimal: [
        { pattern: /^([0-9]+)*([.][0-9]{1,2})?$/, message: '请输入正整数且小数最多两位' }
    ]
｝