vue前端-表单面积大小比较,显示提示

最新推荐文章于 2023-04-06 14:28:30 发布

h_6543210

最新推荐文章于 2023-04-06 14:28:30 发布

阅读量373

点赞数

文章标签：前端开发 El-form 面积验证模板语法自定义验证规则

本文链接：https://blog.csdn.net/m0_68428581/article/details/124473833

版权

1.实现效果

2.部分相关代码

（1）template内

<el-form
  ref="queryForm"
  :model="form"
  label-width="70px"
  :rules="rules"
>
  <el-form-item label="面积" prop="minArea">
    <el-row style="width:215px">
      <el-col :span="11">
        <el-input
          v-model="form.minArea"
          placeholder="最小面积"
          clearable
          size="small"
          style="width: 100%;"
        />
      </el-col>
      <el-col class="line" style="text-align:center;" :span="2">-</el-col>
      <el-col :span="11" prop="maxArea"> 
        <el-input
          v-model="form.maxArea"
          placeholder="最大面积"
          clearable
          size="small"
          style="width: 100%;"
        />
      </el-col>
    </el-row>
  </el-form-item>
</el-form>

（2） script内

data() {
    const areaRule = (rule, value, callback) => {
      if (
        this.form.minArea && this.form.maxArea
      ) {
        if (
          Number(this.form.minArea) > Number(this.form.maxArea)
        ) {
          return callback(new Error("最小面积不能超过最大面积"));
        } else {
          return callback();
        }
      }
    };
    return {
      // 查询参数
      form: {
        minArea:null,
        maxArea:null, 
      },
      rules: {
        minArea: [{ validator: areaRule , trigger: "blur" }],
        maxArea: [{ validator: areaRule , trigger: "blur" }], 
      },
    };
  },

（ps：新手小白，记录一下）