技術標籤：jeecgbootvue

文章目錄

• 1：實現的效果
• 2：實現步驟

講解：此功能分為左輸入框和右輸入框
限制條件：
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("起始數不能大於結束數");
        }
      },