详解element-ui设置下拉选择切换必填和非必填

把

name

rules

注意是函数

{ validator: validateName }

rules: {
  name: [{ validator: validateName }],
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]}

然后设置函数

validateName

可以看到，必填时按照我们设置的提示语提示，非必填时，校验通过

贴上代码

 data() {
   // 验证活动名称的函数
   let validateName = (rule, value, callback) => {
     // 当活动名称为空值且为必填时，抛出错误，反之通过校验
     if (this.ruleForm.name === "" && this.isHaveTo) {
       callback(new Error("请输入活动名称"));
     } else {
       callback();
     }
   };
   return {
     ruleForm: {
       name: "",
       region: ""
     },
     rules: {
       name: [{ validator: validateName }],
       region: [
         { required: true, message: "请选择类型", trigger: "blur" }
       ]     }
   };
 },

➢ 完整demo代码

demo

vue-cli

element-ui

核心代码参考如下：

<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name" :required="isHaveTo">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%">
          <el-option label="必填" value="0"></el-option>
          <el-option label="非必填" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    // 验证活动名称的函数
    let validateName = (rule, value, callback) => {								 
 2/3   首页 上一页 1 2 3 下一页 尾页