vue+elementui实现动态表单校验

在工作中经常有动态表单，动态表格，而必不可少的就是表单校验，接下来给大家展示代码

（1）html

<el-form
      :model="value"
      :rules="rules"
      ref="saleForm"
      label-width="85px"
      class="product-form">
  <el-table :data="middleSkuTableData" border style="width: 100%" class="product-table">
    <el-table-column
       v-for="(item,index) in middleSelectProductAttr"
       :label="item.nameLabel"
       :key="index"
       :prop="item.nameProp"
       align="center">
     </el-table-column>
     <el-table-column
       label="价格/元"
       align="center"
     >
	     <template slot-scope="scope">
	       <el-form-item :prop="'middleSkuTableData.'+scope.$index+'.priceStandard'" :rules="rules.priceStandard">
	         <el-input v-model="scope.row.priceStandard" type="number" :min="0" size="mini"></el-input>
	       </el-form-item>
	     </template>
     </el-table-column>
     <el-table-column
       label="会员价格/元"
       align="center">
	     <template slot-scope="scope">
	       <el-form-item :prop="'middleSkuTableData.'+scope.$index+'.priceVip'" :rules="rules.priceVip">
	         <el-input v-model="scope.row.priceVip" type="number" :min="0" size="mini"></el-input>
	       </el-form-item>
	     </template>
     </el-table-column> 
   </el-table>
</el-form>

（2）data中的校验规则

      rules: {
        priceStandard: [
          {required: true,message: "请输入价格",trigger: "blur"},
          { validator: checkPrice, trigger: 'blur' }
        ],
        priceVip: [
          {required: true,message: "请输入会员价",trigger: "blur"},
          { validator: checkPrice, trigger: 'blur' }
        ]
      }

（3）最后实现的效果图如下