vue element编辑框根据值动态确认是否是必填项required true or false问题
更新时间:2026年04月23日 10:01:56 作者:Pisces_224
该文章主要介绍了在编辑数据时,根据是否有时间数据来决定某项是否为必填项,作者提供了一个简单的解决方法,并分享了HTML表单代码和校验规则,最后表示希望对读者有所帮助
如题
最近遇到个问题,就是在编辑某一项数据时,分两种情况:一种是没有时间数据的,另一种是有时间数据的。要求是当时间数据有值时该项为必填项;值为空时该值为非必填项。
很简单请看下面:
解决
如图:

这两项当前值为空,此时两项为 非必填项(无小红点);

这两项有值,为必填项。
代码如下
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"},
],
}
}
}
是不是很简单,哈哈哈
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)
这篇文章主要介绍了Vue Router解决多路由复用同一组件页面不刷新问题,多路由复用同一组件的场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08


最新评论