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

直接把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'"

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值