vue 实现两个数的取值范围

讲解：此功能分为左输入框和右输入框
限制条件：
1：只能输入数字
2：左边的数值不能大于右侧
3：限制了最小值为0

1：实现的效果

2：实现步骤

1. 页面使用两个数字输入框

 <a-col :xl="5" :lg="7" :md="8" :sm="24">
    <a-form-item label="访问数范围" >
         <a-input-number  :min="0"  v-model="queryParam.visitNum_begin" @change="handleMinChange" />
         ~
		 <a-input-number :min="0"  v-model="queryParam.visitNum_end" @change="handleMaxChange" />
    </a-form-item>
 </a-col>

2. data中定义参数设置默认值

  // 查询条件
        queryParam: {
          visitNum_begin: 0, 
          visitNum_end: 100000
        },

3. methods方法

  handleMinChange(value) {
        this.verification()
      },
      handleMaxChange(value) {
        this.verification()
      },
      //字段验证
      verification(){
        if(this.queryParam.visitNum_begin>this.queryParam.visitNum_end){
          this.$message.warning("起始数不能大于结束数");
         return false;
        }else{
          return true;
        }
      },

4. 把searchQuery查询方法写到本页面

 searchQuery() {
        if(this.verification()){
          this.loadData(1);
        }else{
          this.$message.warning("起始数不能大于结束数");
        }
      },