element ui表单动态验证规则

最新推荐文章于 2024-09-19 09:45:04 发布

渣渣枫!

最新推荐文章于 2024-09-19 09:45:04 发布

阅读量4.2k

点赞数 1

分类专栏： element UI Vue 文章标签： element UI 动态验证表单规则是否必填

本文链接：https://blog.csdn.net/qq_42816550/article/details/100165824

版权

Vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

element UI

9 篇文章 1 订阅

订阅专栏

话不多说，先来效果图:
在这里插入图片描述
要求是选择延期时，延期天数必填。

      <el-form-item label="是否延期" prop="status">
        <el-switch
          v-model="addForm.status"
          active-color="#13ce66"
          active-text="是"
          inactive-text="否"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="延期天数" prop="delay" :rules="addForm.status == 1 ? rules.delay : []">
        <el-input type="number" v-model="addForm.delay" placeholder="请输入延期天数"></el-input>
      </el-form-item>
      /***************************************************/
      rules: {
        delay: [{ required: true, message: "请输入延期天数", trigger: "blur" }],
      }

还有一种方法可以用

<el-form-item label="延期天数" prop="delay" :required="addForm.status == 1 ? true : false">
     <el-input type="number" v-model="addForm.delay" placeholder="请输入延期天数"></el-input>
</el-form-item>

敢敢单单, 套你猴子。。。