vue+elementui实现对表格里的表单进行校验

• 首先： 被绑定的值与规则要放在同一个对象里边（不能直接写在data里）

   <ks-form ref="tableForm" :model="tableForm" :rules="tableForm.rules">
       <ks-table :data="tableForm.skuData" border style="width: 100%">
           <ks-table-column v-if="showVerSionItem" prop="versionAttr" label="版本" align="center" header-align="center">
               <template slot-scope="scope">
                   <div>
                       <span style="margin-left: 0.5rem">{{ scope.row.versionAttr.split('^&__&^')[0] }}</span>
                   </div>
               </template>
           </ks-table-column>
           <ks-table-column v-if="showColorItem" prop="colorAttr" label="颜色" align="center" header-align="center">
               <template slot-scope="scope">
                   <div>
                       <span class="c-sp" :style="`background: ${scope.row.colorAttr.split('^&__&^')[1]}`"></span>
                       <span style="margin-left: 0.5rem">{{ scope.row.colorAttr.split('^&__&^')[0] }}</span>
                   </div>
               </template>
           </ks-table-column>
           <ks-table-column prop="barCode" label="商品条形码" align="center" header-align="center">
               <template slot="header">
                   <div style="color: #436df3">商品条形码</div>
               </template>
               <template slot-scope="scope">
                   <div class="tab-input tab-1">
                       <ks-form-item :prop="'skuData.' + scope.$index + '.barCode' " :rules="tableForm.rules.barCode">
                           <ks-input v-model="scope.row.barCode" style="width:12rem" type="number" @blur="barCodeBlur($event, scope.row)"></ks-input>
                       </ks-form-item>
                   </div>
               </template>
           </ks-table-column>
           <ks-table-column prop="jingdongPrice" min-width="100%" align="center" header-align="center">
               <template slot="header" slot-scope="/* eslint-disable vue/no-unused-vars */ scope">
                   <div class="tab-header">
                       <span style="color: #ff0000; margin-right:0.5rem">*</span>
                       <span style="margin-right:0.5rem">京东价(元)</span>
                       <ks-input v-model="jdPrice" style="width:6rem; margin-right:0.5rem" @blur="commonPriceBlur('jdPrice')"></ks-input>
                       <ks-tooltip placement="bottom" effect="light">
                           <div slot="content">
                               <ks-button show-type="text" type="text" @click="priceToAll()">应用到全部SKU</ks-button>
                               <br />
                               <ks-button show-type="text" type="text" @click="priceToSome()">应用到未填写SKU</ks-button>
                           </div>
                           <ks-button icon="ks-icon-direction-down" show-type="text" type="primary"></ks-button>
                       </ks-tooltip>
                   </div>
               </template>
               <template slot-scope="scope">
                   <div class="tab-input tab-2">
                       <ks-form-item :prop="'skuData.' + scope.$index + '.jingdongPrice' " :rules="tableForm.rules.jingdongPrice">
                           <ks-input v-model="scope.row.jingdongPrice" style="width: 8rem" @blur="skuPriceBlur(scope.row.jingdongPrice, scope.$index)"></ks-input>
                       </ks-form-item>
                   </div>
               </template>
           </ks-table-column>
           <ks-table-column prop="stockNum" label="库存" align="center" header-align="center">
               <template slot="header" slot-scope="/* eslint-disable vue/no-unused-vars */ scope">
                   <div class="tab-header">
                       <span style="color: #ff0000; margin-right:0.5rem">*</span>
                       <span style="margin-right:0.5rem">库存</span>
                       <ks-input v-model="jdStoreNum" style="width:6rem; margin-right:0.5rem"></ks-input>
                       <ks-tooltip placement="bottom" effect="light">
                           <div slot="content">
                               <ks-button show-type="text" type="text" @click="stockToAll()">应用到全部SKU</ks-button>
                               <br />
                               <ks-button show-type="text" type="text" @click="stockToSome()">应用到未填写SKU</ks-button>
                           </div>
                           <ks-button icon="ks-icon-direction-down" show-type="text" type="primary"></ks-button>
                       </ks-tooltip>
                   </div>
               </template>
               <template slot-scope="scope">
                   <div class="tab-input tab-2">
                       <ks-form-item :prop="'skuData.' + scope.$index + '.stockNum' " :rules="tableForm.rules.stockNum">
                           <ks-input ref="stockRef" v-model="scope.row.stockNum" style="width:8rem" @blur="stockBlur()"></ks-input>
                       </ks-form-item>
                   </div>
               </template>
           </ks-table-column>
           <ks-table-column prop="marketSku" label="商家sku(可不填)" align="center" header-align="center">
               <template slot-scope="scope">
                   <div class="tab-input">
                       <ks-input v-model="scope.row.marketSku" style="width:12rem"></ks-input>
                   </div>
               </template>
           </ks-table-column>
       </ks-table>
   </ks-form>