vue如何用element实现区间选择组件

这篇文章主要介绍“vue如何用element实现区间选择组件”，在日常操作中，相信很多人在vue如何用element实现区间选择组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue如何用element实现区间选择组件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

主要思路

1. 单个表单校验：必填项校验、正整数校验、区间校验

2. 关联校验：右侧阈值不得小于左侧阈值

根据上面的思路，单个表单的校验属于公共校验方法，关联校验需要分别校验（因为对比对象不同，且提示语不同），由此在自定义校验中有了如下定义：

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('输入值不得小于最小阈值'));},

填坑（重点）

根据上面的写法，组件的基本功能实现了，但是有一个坑！如下：

很显然，左侧值是小于右侧值的，但是校验提示仍然报错。究其原因，还是关联校验的问题。既然是关联交验，改变其中一个时应该会重新校验两个。很简单，在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关联交验时需要验证其关联项，且不能重复校验

全部代码：

<template> <el-form ref="form" :model="form" :rules="rules">  <el-form-item prop="min">   <el-input v-model="form.min" @change="handleMinChange" />  </el-form-item>  ~  <el-form-item prop="max">   <el-input v-model="form.max" @change="handleMaxChange" />  </el-form-item> </el-form></template> <script>const MIN_NUMBER = 1;const MAX_NUMBER = 100000; export default { data() {  return {   form: { min: '20', max: '100000' },   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' },    ],   },  }; }, methods: {  getFormData() {   const ret = {};   this.$refs.form.validate((valid) => {    ret.valid = valid;    ret.form = this.form;   });   return ret;  },  resetForm() {   this.$refs.form.resetFields();  },  handleMinChange() {   this.$refs.form.validateField('max');  },  handleMaxChange() {   this.$refs.form.validateField('min');  },  validateCom(rule, value, callback) {   const one = Number(value);   if (Number.isInteger(one)) {    if (one < MIN_NUMBER) {     return callback(new Error('输入值必须大于0'));    } else if (one > MAX_NUMBER) {     return callback(new Error('输入值必须小于100000'));    }    return callback();   }   return callback(new Error('输入值必须为正整数'));  },  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('输入值不得小于最小阈值'));  }, },};</script>

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

到此，关于“vue如何用element实现区间选择组件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！