vue 实现两个数的取值范围
文章目录1:实现的效果2:实现步骤1:实现的效果2:实现步骤页面使用两个数字输入框<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="handleMi
·
讲解:此功能分为左输入框和右输入框
限制条件:
1:只能输入数字
2:左边的数值不能大于右侧
3:限制了最小值为0
1:实现的效果
2:实现步骤
- 页面使用两个数字输入框
<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>
- data中定义参数设置默认值
// 查询条件
queryParam: {
visitNum_begin: 0,
visitNum_end: 100000
},
- 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;
}
},
- 把searchQuery查询方法写到本页面
searchQuery() {
if(this.verification()){
this.loadData(1);
}else{
this.$message.warning("起始数不能大于结束数");
}
},
更多推荐
已为社区贡献10条内容
所有评论(0)