element 表格中 多个输入框 怎么校验 el-form 动态验证规则 el-table中检验多个input

22 篇文章 0 订阅
10 篇文章 0 订阅

问题:在element表格中需要验证多个输入框,如下图:

解决:在表格中加入 el-form-item,上代码

<el-form ref="form" :model="form" label-width="120px" :rules="rules">
  <el-form-item label="优惠券配置:" prop="payload">
     <el-table :data="form.payload" border class="padloadTable">
            <el-table-column prop="id" label="优惠券ID" />
            <el-table-column prop="name" label="优惠券名称" />
            <el-table-column prop="deduction_rule" label="抵扣规则" />
            <el-table-column prop="expire_time" label="有效期" />
            <el-table-column prop="surplusNum" label="剩余可发放数量" />
            <el-table-column label="发放数量" width="90">
              <template slot-scope="scope">
                <el-form-item :prop="'payload.'+scope.$index+'.num'" :rules="rules.payloadNum">
                  <el-input v-model="scope.row.num" size="mini" maxlength="1" oninput="value=value.replace(/[^\d]/g,'')" @blur="inputNum($event,scope.$index)" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot="header">
                <el-button type="text" size="small" @click="createCoupon">新增优惠券</el-button>
              </template>
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteFn(scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
</el-form>
data() {
    const validateNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error());
        return
      }
      if (value > 5 || value < 1) {
        callback(new Error());
        return
      }
      callback();
    }
    return {
      tableData: [],
      rules: {
        payloadNum: [{ required: true, validator: validateNum, trigger: 'blur', message: '' }]
      },
      form: {
        payload: [] // 优惠券id
      }
    };
  },

如果只想标红输入框,而不想显示错误提示,可以用css隐藏 错误提示

参考文章:http://raboninco.com/1U1ks

开发宝典:http://raboninco.com/1U1m2

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值