vue 实现两个数的取值范围

àì夳堔傛蜴生んèń 2022-12-27 12:51 194阅读 0赞

### 文章目录 ###

*  1：实现的效果
 *  2：实现步骤

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

# 1：实现的效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center]

# 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>

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

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

1.  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;
            }
          },

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/41df5d76729e4845baebcdf223a5e063.png