vue表单rules校验是动态的

最新推荐文章于 2024-08-29 18:40:58 发布

初心w50t2

最新推荐文章于 2024-08-29 18:40:58 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_41910413/article/details/137118553

VUE 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用ElementUI组件构建一个表单，展示了一个包含分类类型、预算科目和资金管理方式的下拉选择器，并实现了基于表单值的动态验证规则，规则存储在computed属性中以确保正确执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单代码如下：

 <el-form ref="form" label-width="60px" :model="formData" :rules="newRules">
      <el-form-item label="分类类型" prop="type">
        <el-select
          v-model="formData.type"
          :data="typeList"
        />
      </el-form-item>
      <el-form-item label="预算科目" prop="subjectTree">
        <el-select
          v-model="formData.subjectTree"
          :data="valueList"
        />
      </el-form-item>
      <el-form-item label="资金管理方式" prop="value">
        <el-select
          v-model="formData.value"
          :data="valueList"
        />
      </el-form-item>
    </el-form>

rules代码：
本来是把rules写在data里的发现校验并未生效后来只能放在computed里

 computed: {
    newRules() {
      const { formData } = this
      return {
        type: [
          {
            required: true,
            message: this.$t('validator.required', { name: '分类类型' })
          }
        ],
        subjectTree: [
          {
            required: formData.type === '0' ? true : false,
            message: this.$t('validator.required', { name: '预算科目' })
          }
        ],
        value: [
          {
            required: formData.type === '1' ? true : false,
            message: this.$t('validator.required', { name: '资金管理方式' })
          }
        ]
      }
    }
  },