vue + iview inputNumber 数字输入框踩坑（即设置 max 后输入还能输入超过最大值内容）

vue + iview inputNumber 数字输入框踩坑（即设置 max 后输入还能输入超过最大值内容）

在 table 组件中嵌套使用时

当在 table 组件中嵌套使用时，在 render 中自定义内容，在 props 中设置输入的max 、min 和 step，然后监听输入的变化，设置最大值和最小值，此处以设置最大值为例：

//poorColumns为table组件绑定的column
poorColumns: [
        {
          title: "考评项目",
          key: "kpxm",
          align: "center",
          minwidth: 140,
        },
        {
          title: "考评内容",
          align: "center",
          minwidth: 140,
          key: "kpnr",
        },
        {
          title: "考评指标",
          key: "kpzz",
          align: "center",
          minwidth: 180,
        },
        {
          title: "考评方法",
          key: "kpff",
          align: "center",
          minwidth: 180,
        },
        {
          title: "上传材料要求",
          align: "center",
          minwidth: 130,
          key: "uploadRemark",
        },
        {
          title: "材料上传",
          align: "center",
          width: 200,
          slot: "operation",
        },
        {
          title: "自评得分",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h("InputNumber", {
              style: {
                width: "85%",
              },
              props: {
                value: params.row.selfEvalScore,
                size: "large",
                placeholder: `该项总分为${params.row.score}分`,
                max: params.row.score,//此处设置按钮点击的最大值
                step: 1,
                min: 0,
              },
              on: {
                input: (event) => {
                  //监测输入的内容，并将输入内容赋值给绑定的字段
                  params.row.selfEvalScore = event;
                  //使用$nextTick避免数字超过限制后能继续输入更大的值
                  this.$nextTick(() => {
                    if (event > params.row.score) {//在数字变化时判断数字的大小，超过对应的值就用对应的值赋值
                      params.row.selfEvalScore = params.row.score;
                      this.poorData[params.index].selfEvalScore =
                        params.row.score;
                    } else {//未超过就将event（即当前值）赋值给绑定的字段
                      params.row.selfEvalScore = event;
                      this.poorData[params.index].selfEvalScore = event;
                    }
                  });
                },
              },
            });
          },
        },
      ],

不使用$nextTick时，数字超过最大值后仍能继续输入。

普通使用不嵌套时

在使用时绑定 change 的方法，监听输入的内容变化并对其进行判断（以设置最大值为例）：

<template>
  //此处max根据suffixLabel字段动态设置
  <InputNumber
    :min="0"
    :step="1"
    :max="question.suffixLabel == '%' ? 100 : Infinity"
    @on-change="changeNumber"
    v-model="question.itemValue"
  ></InputNumber>
</template>

<script>
export default {
  methods: {
    changeNumber(val) {
      if (this.question.suffixLabel && this.question.suffixLabel == "%") {
      //使用$nextTick避免在判断达到最大值并赋值后仍能输入数字
        this.$nextTick(() => {
          if (val > 100) {
            this.question.itemValue = 100;
          } else {
            this.question.itemValue = Number(val);
          }
        });
      }
    },
  },
};
</script>