美文网首页
vue给多个el-table嵌套表单验证

vue给多个el-table嵌套表单验证

作者: 前端阿峰 | 来源:发表于2020-07-24 17:33 被阅读0次

表格中嵌套使用表单验证

表格是el-table自动获取的后台数据,每行都有el-input的验证,这样一个rules的规则就不能匹配到每一行,所以要是用动态的prop和rules规则

<el-form :rules="rules">
  <div v-for="(list,sort) in activityRulesList">
      <el-table
              ref="contionsTable"
              :data="list.activityGifts"
              stripe
              tooltip-effect="dark"
              :header-cell-style="{background:'rgb(217, 224, 234)',color:'#606266'}"
              border
            >
          <el-table-column label="赠品库存" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'activityGifts.'+sort+'.'+scope.$index + '.giftInventory'"
                    :rules="rules.giftInventory"
                  >
                    <el-input-number
                      :controls="false"
                      placeholder="请填写"
                      size="mini"
                      :min="1"
                      :precision="0"
                      class="w-100"
                      v-model="scope.row.giftInventory"
                    ></el-input-number>
                  </el-form-item>
                </template>
              </el-table-column>
       </el-table>
  </div>
</el-form>
<script>
export default{
  data(){
        const validGiftInventory = (rule, value, callback) => {
      // console.log(rule,value,callback);
      let ruleIndex = rule.field.split(".")[1];
      let rowIndex = rule.field.split(".")[2];
      let giftInventory = this.activityRulesList[ruleIndex].activityGifts[rowIndex].giftInventory;
      if(!giftInventory){
        callback(new Error("不能为空"));
      }
      else{
        callback();
      }
    };
        return{
            rules: {
                giftInventory: {
                    validator: validGiftInventory,
                     required: true,
                    trigger: "blur"
                 }
            },
          activityRulesList:[
            {ruleId:0,activityGifts:[{id:0,giftInventory:[]}]},
            {ruleId:1,activityGifts:[{id:0,giftInventory:[]}]}    
          ]
        }
    }
}
</script>

相关文章