vue中如何利用element实现一个区间选择组件
今天小编给大家分享一下vue中如何利用element实现一个区间选择组件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
主要思路
单个表单校验：必填项校验、正整数校验、区间校验
关联校验：右侧阈值不得小于左侧阈值
根据上面的思路，单个表单的校验属于公共校验方法，关联校验需要分别校验（因为对比对象不同，且提示语不同），由此在自定义校验中有了如下定义：
rules: { min: [ { required: true, message: '必填项，请维护', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: this.validateMin, trigger: 'blur' }, ], max: [ { required: true, message: '必填项，请维护', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: this.validateMax, trigger: 'blur' }, ],},公共校验方法：正整数校验、区间校验
validateCom(rule, value, callback) { const one = Number(value); if (Number.isInteger(one)) { if (one < MIN_NUMBER) { return callback(new Error(`输入值必须大于${MIN_NUMBER}`)); } else if (one > MAX_NUMBER) { return callback(new Error(`输入值必须小于${MAX_NUMBER}`)); } return callback(); } return callback(new Error('输入值必须为正整数'));},注意：input输出的始终是字符串类型，需要转换成数字后进行比对
关联校验：
validateMin(rule, value, callback) { const one = Number(value); const max = Number(this.form.max); if (!max || one < max) { return callback(); } return callback(new Error('输入值不得大于最大阈值'));},validateMax(rule, value, callback) { const one = Number(value); const min = Number(this.form.min); if (!min || one > min) { return callback(); } return callback(new Error('输入值不得小于最小阈值'));},大概，你会想，这不就完了吗！so easy！现在真正的坑才开始
填坑（重点）
根据上面的写法，组件的基本功能实现了，但是有一个坑！如下：
很显然，左侧值是小于右侧值的，但是校验提示仍然报错。究其原因，还是关联校验的问题。既然是关联交验，改变其中一个时应该会重新校验两个。很简单，在input改变时，重新校验表单不就OK了吗
handleChange() { this.$refs.form.validate();}真实表现正如我们所料，但是当我们打开console的时候，会看到Uncaught (in promise) false，这又是什么鬼，身为优秀的前端工程师，你定不会允许自己的代码里报错，即使不影响正常流程。
经查证：Promise报错，Uncaught的意思是代表有reject状态没有被catch。究其原因，改变一个值时，校验整个表单时，改变的那个input会执行两次校验，导致异常。
最后做如下修改：
handleMinChange() { this.$refs.form.validateField('max');},handleMaxChange() { this.$refs.form.validateField('min');},// 并对外暴露操作方法getFormData() { const ret = {}; this.$refs.form.validate((valid) => { ret.valid = valid; ret.form = this.form; }); return ret;},resetForm() { this.$refs.form.resetFields();},总结input表单输出值为String类型，即使设置了type=number关联交验时需要验证其关联项，且不能重复校验
全部代码：
~
以上就是"vue中如何利用element实现一个区间选择组件"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。
