el-form单个表单域添加自定义验证

版权声明：随便转吧，反正我也是转的 https://blog.csdn.net/qq_34122822/article/details/82895581

直接把validator写在data中会报undefined，我们需要把它改造一下，写在methods中

下面贴代码

    <el-form :model="skus" ref="skus">
      <el-table :data="skus.skuList" border style="width: 100%">
        <el-table-column
          label="sku名称"
          min-width="180px"
          align="center">
          <template slot-scope="scope">
            <el-form-item
              :prop="'skuList.' + scope.$index + '.skuName'" :rules="[
              { required: true, message: '请输入sku名称', trigger: 'blur' }
            ]">
              <el-input size="mini" v-model="scope.row.skuName"/>
            </el-form-item>
          </template>
        </el-table-column>
      <el-table-column
        label="sku属性"
        align="center"
        min-width="150px">
        <template slot-scope="scope">
          <div style="display: flex;margin-right: 4px">

            <div v-for="val in scope.row.attrs"
                 v-bind:key="val.attributeId">
              <template v-if="val.showType=='C'" >
                <div style="margin: 4px;display: flex">
                  <div style="width: 20px;height: 20px;margin-right: 2px;" :style="{background:val.optionValue}"></div>
                  <span>{{val.optionName}}</span>
                </div>
              </template>
              <template v-if="val.showType=='T'" >
                <div  style="margin: 4px"
                >{{val.optionName}}
                </div>
              </template>
              <template v-if="val.showType =='P'"  >
                <img :src="val.optionValue"
                     style="width: 20px;height:20px;margin: 4px"/>
              </template>
            </div>
          </div>
        </template>
      </el-table-column>
      </el-table>
    </el-form>

 将validator写在methods中

methods:{
      // 验证方法 放在data里会有问题
      numberValidator(rule, value, callback) {
        if (parseFloat(value) == 'NaN' || parseFloat(value) < 0) {
          callback(new Error("输入有误"));
        }
        callback();
      },
      imageValidator(rule, value, callback) {
        if (value == null || value == '') {
          callback(new Error("请上传图片"));
        }
        callback();
      },
}

如果table在form中，且需要对每个表格进行验证的话，需要对prop进行处理

例如 :prop="'skuList.' + scope.$index + '.marketPrice'"