el-input中的el-select控制el-input输入的内容

派大星，我们去抓水母吧~

已于 2024-02-02 14:37:23 修改

阅读量1.7k

点赞数 1

分类专栏： element 文章标签： vue.js javascript 前端

于 2023-07-05 14:57:05 首次发布

本文链接：https://blog.csdn.net/m0_60247885/article/details/131549943

版权

element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该项目需求是在input输入框后设置单位选择器，单位变化时输入框的验证规则随之改变。通过在data中初始化数据，computed中计算占位符，并在watch中监听input和单位选择器的变化，动态设置验证规则。当输入值不符合新规则时，会清除输入值。

摘要由CSDN通过智能技术生成

项目需要：需要在input后置单位选择器，来实现随着单位的变动，输入框值的要求也跟着变动并且验证信息也随之改变(第一次写，写的不好见谅)

实现方式：

在data中初始化数据

ruleForm:{
        rate:'',
        cycle:"",
      },
      disable: false,

在computed中输入自己想要的占位符样式（可省略）

computed: {
    // 输入框placeholder的数据
    inputPlaceholder() {
      if (this.ruleForm.cycle === '05') {
        return '请输入小于等于60并大于等于1的整数';
      } else if (this.ruleForm.cycle === '04') {
        return ' 请输入小于等于24并大于等于1的整数';
      } else {
        return '';
      }
    },
  },

在watch中监听输入框的变化

  watch: {
    // 监听当前input的变化
    'ruleForm.rate'(newVal) {
      this.setValidationRules(newVal, this.ruleForm.cycle);
    },
    // 监听当前选择框的变化
    'ruleForm.cycle'(newVal) {
      this.setValidationRules(this.ruleForm.rate, newVal);
    },
  },

//验证要求
setValidationRules(inputValue, selectValue) {
      const value1 ='输入限制'
      if (selectValue === '05') {
        //当传入的数据不符合，可写入自己想要的验证信息
        if (!value1) {
          this.rules.rate = [
            {
              required: true,
              message: '',
              trigger: 'blur',
            },
          ];
        }
      }
    },
//当el-input输入的值不符合要求时清空
 handleInputBlur() {
     const value1 ='输入限制'
      if (this.ruleForm.cycle === '05') {
        if (!value1) {
          this.ruleForm.rate = '';
        }
      }
    },