element-input 自定义最值


table表单内某一行的input

<template slot-scope="scope">
         <p v-if="scope.row.switch">
           <template v-solt="scope">
             <div>
               <!-- active-text="&ensp" -->
               <el-switch v-model="scope.row.verificationFlag" active-color="#13ce66" inactive-color="#ff4949"
                 :active-value="true" :inactive-value="false" inactive-text="启用登录图形码:"></el-switch>
               <p style="display:inline-block ;margin-left: 20px;" v-if="scope.row.verificationFlag">
                 当密码错误
                 <el-input @input="numberChange(arguments[0], 3)" @change="numberChange(arguments[0], 3)"
                   v-model.number="scope.row.verificationNum" maxlength="1" :max="3" :min="0" style="width: 50px"
                   size="small">
                 </el-input>
                 <!-- <el-input @input="changePaidAmount($event)" v-model.number="scope.row.verificationNum"
                   maxlength="1" :max="3" :min="0" style="width: 50px" size="small">
                 </el-input> -->
                 次强制图形码验证
               </p>
             </div>
           </template>
         </p>
         <p v-else-if="scope.$index % 2 === 0">
           <el-input v-model="scope.row.content" placeholder="多IP请用英文半角逗号分隔"></el-input>
         </p>
         <p v-else>
           <el-time-select placeholder="起始时间" v-model="scope.row.startTime" @change="scope.row.endTime = ''"
             :picker-options="{
               start: '00:00',
               step: '01:00',
               end: '24:00',
             }">
           </el-time-select>
           <el-time-select placeholder="结束时间" v-model="scope.row.endTime" :picker-options="{
             start: '00:00',
             step: '01:00',
             end: '24:00',
             minTime: scope.row.startTime,
           }">
           </el-time-select>
         </p>
       </template>

方法: 记得去data定义你的verificationNum,配合$nextTick ,就能解决DOM更新的问题

// 限制input 最大最小值
  numberChange (val, maxNum) {
    //转换数字类型
    this.data[6].verificationNum = Number(val)
    //重新渲染
    this.$nextTick(() => {
      //比较输入的值和最大值,返回小的
      let num = Math.min(Number(val), maxNum)
      //输入负值的情况下, = 0(可根据实际需求更该)
      if (num < 0) {
        this.data[6].verificationNum = 0
      } else {
        //反之
        this.data[6].verificationNum = num
      }
    })
  },

Author: xt_xiong
转载要求: 如有转载请注明出处 :根据 CC BY 4.0 告知来自 xt_xiong !
评论
  标题