讲解:此功能分为左输入框和右输入框
限制条件:
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>
  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("起始数不能大于结束数");
        }
      },
Logo

前往低代码交流专区

更多推荐