每日三思:element-ui利用form表单验证来验证表格

动态验证表格里的输入框

效果图

<el-form :model="form" :rules="rules" ref="form">
	<el-table class="form-brand-list" stripe v-if="form.prdctStoreList && form.prdctStoreList.length > 0" :data="form.prdctStoreList">
	<el-table-column label="原价(元)" width="200"  class-name="td-input">
        <template slot-scope="scope">
          <el-form-item :key="scope.$index" :prop="'prdctStoreList.'+scope.$index+'.mktPrice'" :rules="rules.mktPrice">
            <el-input type="number" maxlength="5" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.mktPrice',9999999,0)" v-model.number="scope.row.mktPrice" min="0" max="9999999"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="售价(元)" width="200"  class-name="td-input">
        <template slot-scope="scope">
          <el-form-item :key="scope.$index" :prop="'prdctStoreList.'+scope.$index+'.activStoreSellPrice'" :rules="rules.activStoreSellPrice">
            <el-input type="number" maxlength="5" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',9999999,0)" v-model.number="scope.row.activStoreSellPrice" min="0" max="9999999"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
	</el-table>
</el-form>

rules

rules: {
  'mktPrice': {required: true, type: 'number', message: '请输入原价', trigger: 'blur'},
   'activStoreSellPrice': {required: true, type: 'number', message: '请输入售价', trigger: 'blur'}
 },

注意事项

<el-form-item :key="scope.$index" :prop="'prdctStoreList.'+scope.$index+'.activStoreSellPrice'" :rules="rules.activStoreSellPrice">

中的prdctStoreList要和

<el-table class="form-brand-list" stripe v-if="form.prdctStoreList && form.prdctStoreList.length > 0" :data="form.prdctStoreList">

中的form.prdctStoreList对应

可能出现的报错

please transfer a valid prop path to form item

就是因为上面的注意事项端不统一,切记!!!el-form-item使用的是字段而不是form.字段!!! ?