head

Vue Element-UI表单校验 之 按条件动态控制是否必填/必选

在使用表单时，可能会有一种情况，即某个项需要根据另一个项来决定该项是否为必填项
步骤：
设置好el-form的rules属性
并且写好对应rules规则
在el-form-iem绑定rules属性 => 条件判断

html

<template>
    <div class="container">
      <button @click="btn">切换为必填或非必填）</button>
      <el-form :model="info" :rules="rules" style="width:150px;margin:0 auto;">
        <el-form-item
          label="活动名称"
          prop="name"
          :rules="status == 0 ? rules.name : [{required: false}]">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
      </el-form>
    </div>
</template>

js

export default {
    name: 'test',
    components: {},
    data() {
      return {
        info: {
          name:''
        },
        // 校验规则
        rules: {
          name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
        },
        // 通过该值来判断是否为必填项
        status: 0, 
      }
    },
    methods: {
      btn(){
        // 更改status
        this.status = this.status == 0 ? 1 : 0;
      }
    }
}
© 允许规范转载