一场由Element-ui 数字输入框引发的惨案，我们应该怎么选择是否使用输入输入框?

# 本文灵感来源于工作实践

        上午我接到一个功能优化的需求，说是如果在单位为“亩”的情况下，要确保他的数量不能大于地块的数量并回显，虽然目前已经在新增时可以实现，但是在修改时就直接失效了。

        我当时第一时间就想到，何必写个方法来做校验呢，直接使用Element-ui的数字输入框就好了呀，莫非领导在考察我的功底，于是乎我着手了优化工作。

        首先我看到同事编写的经典输入框，如下：

---

<el-input v-model="form.number"

                  v-if="form.unit=='亩'"

                 :placeholder="`请输入数量，数量不能超过${面积}亩`"

                  style="width:100%;"

 />

<el-input v-model="formData.number" v-else placeholder="请输入数量" />

        于是忽我开启了我的改造之旅，改成了这样:

<el-input-number v-model="formData.number"

                   v-if="formData.unit=='亩'"

                   :placeholder="`请输入数量，数量不能超过${area}亩`"

                   :max="area"

                   :min="0"

                    style="width:100%;"

  />

                  <el-input v-model="formData.number" v-else placeholder="请输入数量" />

        然后根据上面的问题描述，我知道他们请求了接口，于是忽，我在用户点击编辑之后做了一个根据ID查询的操作，并且每次进来赋值给area（即最大面积），这样就不用在使用繁琐的方法了。

        于是我开始了着手测试，新增....没问题，那我试试修改呢，问题出现了。不论怎么样，我的面积字段他都是0，于是我开启了排除，我首先打印日志，打印了对象，和对象点属性，神奇的一幕出现了，如果查看打印的整个对象，那么他的number字段为0，然而如果打印他的对象点属性，则出现正确的数据。

        我于是看了看接口的请求返回参数，神奇的一幕出现了，他的number属性竟然也是0，这就很奇怪了，我百思不得其解，于是我看了看线上的地址，发现他的数据回显是好的，那么问题就出现在我这里了，于是我在恢复源代码的时候，看到了我用的数字输入框。

        忽然，我想到，有没有可能是：max=”area“ 和 ：min =”0“ 在作怪，于是我把他们删除了，结果果然好了，我灵光乍现，忽然想到了，他的特性，如果超出最大值的时候会默认成为最大值，反之则是最小值，再看看他的默认定义是 const area = ref（0），好问题找到了，因为设置了最大值和最小值导致了我的数据错误。

        那如果最大值和最小值的不能设置的情况下，那我的数字输入框就没有了意义，原来前辈才是高人，我才是那只小卡拉米，我最后不得不使用前辈写的手动校验方法来判断是否超出最大值。

        所以以后，在遇到同样问题的情况下，可以想想当前的情况会不会因为输入框的某种特性而冲突，要仔细研究前辈为什么要这样做。