vue element编辑框根据值动态确认是否是必填项required true or false问题

如题

最近遇到个问题，就是在编辑某一项数据时，分两种情况：一种是没有时间数据的，另一种是有时间数据的。要求是当时间数据有值时该项为必填项；值为空时该值为非必填项。

很简单请看下面：

解决

如图：

这两项当前值为空，此时两项为 非必填项（无小红点）；

这两项有值，为必填项。

代码如下

form表单：

<el-form-item label="生产日期" prop="manufacture_date"
  :rules="editRuleForm.manufacture_date === null">
      <el-date-picker
          v-model="editRuleForm.manufacture_date"
          type="date"
          :value-format="'yyyy-MM-dd'"
          placeholder="生产日期"
          >
      </el-date-picker>
</el-form-item>
<el-form-item label="失效日期" prop="expire_date"
 :rules="editRuleForm.expire_date === null">
      <el-date-picker
          v-model="editRuleForm.expire_date"
          type="date"
          :value-format="'yyyy-MM-dd'"
          placeholder="失效日期">
      </el-date-picker>
</el-form-item>

重点是下面这一句：

:rules="editRuleForm.manufacture_date === null"

校验规则：

就正常规则

<script>
	export default {
		data() {
			return {
				editRuleForm: {}, //修改表单数据
				editRules: {
					manufacture_date: [
				    {required: true, message: "请输入生产日期", trigger: "blur"},
				    ],
				    expire_date: [
				      {required: true, message: "请输入失效日期", trigger: "blur"},
				    ],
				}
			}
	}

是不是很简单，哈哈哈

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。