el-input限制只输入数字,elment后一个输入框大于第一个输入框值,elment两个表单关联

最新推荐文章于 2023-12-08 11:00:40 发布

置顶 weixin_51565477

最新推荐文章于 2023-12-08 11:00:40 发布

阅读量2k

点赞数

分类专栏： element vue

本文链接：https://blog.csdn.net/weixin_51565477/article/details/119612539

版权

vue 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

element

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

template

        <el-row :gutter="14" style="display: flex">
          <el-form-item label="发送对象" prop="startObj">
              <el-input v-model="bulletin.startObj" type="number" style="width:100px" />
          </el-form-item>
          <div class="form-center">至</div>
          <el-form-item prop="endObj" class="form-end">
              <el-input v-model="bulletin.endObj"   type="number" style="width:100px" />
          </el-form-item>
          <div class="form-center">周岁</div>
        </el-row>

data数据

bulletin: { //表单
startObj: null,
  endObj: null,
},
rules: {
  startObj: [
    { required: true, message: '请输入开始周岁', trigger: 'blur' },
    { validator: validateStart, trigger: 'blur' },
  ],
  endObj: [
    { required: true, message: '请输入结束周岁', trigger: 'blur' },
    { validator: validateEnd, trigger: 'blur' },
  ],
}

data数据2,return同级

var validateStart = (rule, value, callback) => {
  if(this.bulletin.endObj){
     this.$refs.ruleForm.validateField('endObj');
   }
   callback();
}
 var validateEnd = (rule, value, callback) => {
   if(this.bulletin.startObj){
     if(Number(this.bulletin.startObj) < Number(value)){
       callback();
     }else{
       callback(new Error('结束周岁必须大于开始周岁'));
     }
   }else{
     callback();
   }
 }

style 使用less

.form-center{
  margin-left: 20px;
  line-height: 40px;
}
.form-conten{
  position: relative;
  width:650px;
  .remaining{
    position:absolute;
    bottom: 10px;
    right: 30px;
  }
}