input框输入限制范围

我想让用户在填写领取数量的时候，在超过下面表格中的物资数量后，点击申请会提示失败，请问应该怎么写呢？

 
                
                  "20">
                    form-item label="领取数量" prop="itemnumber">
                      input v-model="addForm.itemnumber">input>
                    form-item>
                  
                
form-item>
                  type="primary" @click="addOut">立即申请

                form-item>
 
 
  table ref="table" :data="infoList" style="height:430px;" border>
              table-column type="selection" :reserve-selection="true">table-column>
              table-column prop="infoname" label="物资名称">table-column>
              table-column prop="model" label="物资数量">table-column>
              table-column prop="unit" label="物资单位">table-column>
            table>
 

<template>
  <div>
    <el-row>
      <el-col :span="20">
        <el-form-item label="领取数量" prop="itemnumber">
          <el-input v-model="addForm.itemnumber"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="addOut">立即申请</el-button>
    </el-form-item>
    <el-table ref="table" :data="infoList" style="height:430px;" border>
      <el-table-column type="selection" :reserve-selection="true"></el-table-column>
      <el-table-column prop="infoname" label="物资名称"></el-table-column>
      <el-table-column prop="model" label="物资数量"></el-table-column>
      <el-table-column prop="unit" label="物资单位"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        itemnumber: 0,
      },
      infoList: [
        { infoname: '物资1', model: 10, unit: '个' },
        { infoname: '物资2', model: 20, unit: '个' },
        { infoname: '物资3', model: 30, unit: '个' },
      ],
    };
  },
  watch: {
    'addForm.itemnumber'(newVal) {
      const maxModel = Math.max(...this.infoList.map(item => item.model));
      if (newVal > maxModel) {
        this.addForm.itemnumber = maxModel;
        this.$message.error(`领取数量不能超过 ${maxModel}`);
      }
    },
  },
  methods: {
    addOut() {
      // 其他逻辑
      // ...
    },
  },
};
</script>

给表格设置选中事件获取被选中的对象，点击申请的时候，把选中的对象的物资数量和领取数量进行比较

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7759628
• 你也可以参考下这篇文章：input 限制只能输入数字，并限制数字的个数，否则提示
• 除此之外, 这篇博客: input框各种输入框限制总结中的 输入整数并保留两位小数 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

      <input maxlength="3" style="width:70px;height:32px;" type="text" id="btStime" placeholder="输入整数并保留两位小数" oninput="inpt(this)">
  
  

  js逻辑：一般适用于对价格进行限制

      /* 价格限制 */
      function inpt(obj) {
        //禁止录入整数部分两位以上，但首位为0
        obj.value = obj.value.replace(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/g, "$1");
        //先把非数字的都替换掉，除了数字和.
        obj.value = obj.value.replace(/[^\d\.]/g, "");
        //必须保证第一个为数字而不是.
        obj.value = obj.value.replace(/^\./g, "0.");
        //保证只有出现一个.而没有多个.
        obj.value = obj.value.replace(/\.{2,}/g, ".");
        //保证.只出现一次，而不能出现两次以上
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        //只能输入两个小数
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
        return obj.value;
      }
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^