博客

antd结合vue写监听输入框的数据让table表格增加数据，并且输入的数值不能超过选中这条数据的总和。

当选择某一条数据后，请求后端就会给我们返回这条数据的总数，当我们在红色输入框内输入的数字大于蓝色下拉框返回的总值时就会提示。让用户重新选择。（如下图）



输入数字会在右侧表格追加数据。（如下图）



那么接下来那就让代码演示一下吧

<a-table :columns="columns" :data-source="tableData" :pagination="false"   :scroll="{ x:300, y: 300 }">
    <div slot="action" slot-scope="text, record, index">
       <a-button type="primary" size="small" :disabled="false"  @click="handleEdit(record,index,$event)">抽取</a-button>
    </div>
</a-table>

下来我们就要用到watch来监听输入框内输入的数值。（我写的是两个，也可以根据一个判断）

watch:{
      "zgongying"(val,odVal){//val新值，odVal原来值
        if(this.sumChange(val,this.bgongying)){
            let arr = []
            arr =  this.tableData.filter((item,index)=>item.date!='主供应商')
            this.tableData = arr
            for(let i=0;i<val;i++){
              this.tableData.push({
                  date: '主供应商',
                  disabled:false
                })
            }
            }else{
                this.$message.error('前输入超过最大总和,请重新选择')
            }
      },
      "bgongying"(val,odVal){//val新值，odVal原来值
        if(this.sumChange(val,this.zgongying)){
            let arr = []
            arr =  this.tableData.filter((item,index)=>item.date!='备供应商')
            this.tableData = arr
            for(let i=0;i<val;i++){
            this.tableData.push({
                date: '备供应商',
                disabled:false
            })
        }
          }else{
            this.$message.error('前输入超过最大总和,请重新选择')
          }
      }
  },

求后端返回的总数

//计算总和
    sumChange(val,vals){
      if((Number(val)+Number(vals))<=this.sumNumber) return true
      else return false
    },

这是监听了两个输入框，我在里面加了一个disabled属性，就是为了抽取后不在让抽取数据。

注：想要知道转盘数据如何获取，请看我都下一篇文章（感谢关注和点赞）