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

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养🥰
📝 专    栏：常用组件库与实用工具 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

​

 ​

➢ 需求

默认都是必选

下拉选择的时候

选择必填，活动名称为必填，需要校验和显示*

选择非必填，活动名称不做校验，隐藏*

​

➢ 初始校验规则

经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用

因为按照以下的写法的话，element-ui或者elementPlus在组件初始化后校验规则就定型了，切换也没用

rules: {
  name: [
    { required: true, message: "请输入名称", trigger: "blur" }
  ],
  region: [
    { required: true, message: "请选择类型", trigger: "blur" }
  ]
}

➢ 解决方案

第一步：

去除rules中需要动态校验的字段规则

去除name

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

第二步：

在字段为name的form-item上，添加required属性

下面代码isHaveTo为新字段，根据下拉框选择的值来决定是为true还是false

<el-form-item label="活动名称" prop="name" :required="isHaveTo">
  <el-input v-model="ruleForm.name"></el-input>
</el-form-item>

第三步：

计算属性，新增字段isHaveTo

下拉选择框非必须是为1，其他都是必填，包括默认

<el-form-item label="活动名称" prop="name" :required="isHaveTo">
  <el-input v-model="ruleForm.name"></el-input>
</el-form-item>

效果如图：

下拉切换，*号显隐，提交时也有不同规则

注意，新的问题来了

在选择必填时，没有了之前的错误提示文字，而是element自带的提示

第四步：

设置错误提示

使用自定义函数控制流程

把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代码

以element-ui为例，

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) => {
      // 当活动名称为空值且为必填时，抛出错误，反之通过校验
      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" }
        ]
      }
    };
  },
  computed: {
    isHaveTo: function() {
      return this.ruleForm.region !== `1`;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(`已提交表单`);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕

    更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战