通过v-if渲染的element-ui表单,校验规则不生效的问题

因为form-item绑定验证事件是在mounted中进行的,规则变化后没有进行重新绑定验证事件,v-if渲染组件节点diff后被复用了,所以验证也就自然失效了

例如:通过动态选择类型来控制驾驶人是否显示,并且是必填项

  1. 给每一个el-form-item添加一个key属性区分【亲测有效】
bash 复制代码
<el-form-item label="类型:" prop="myType">
	<el-select v-model="addForm.myType" placeholder="请选择类型">
		<el-option v-for="item in typeList" :key="item.value" :label="item.label"
			:value="item.value">
		</el-option>
	</el-select>
</el-form-item>
<!-- 此处需加key 否则校验不起作用 -->
<el-form-item v-if="addForm.myType== '9'"  prop="driver" label="驾驶人" key="1">
	<el-option v-for="item in driverList" :key="item.value" :label="item.label"
		:value="item.value">
	</el-option>
</el-form-item>
  1. 直接在el-form-item中写rules
bash 复制代码
<el-form-item label="类型:" prop="myType">
	<el-select v-model="addForm.myType" placeholder="请选择类型">
		<el-option v-for="item in typeList" :key="item.value" :label="item.label"
			:value="item.value">
		</el-option>
	</el-select>
</el-form-item>
<el-form-item v-if="addForm.myType== '9'"  prop="driver" label="驾驶人" :rules="{ required: true, message: '请选择驾驶人', trigger: 'blur' }">
	<el-option v-for="item in driverList" :key="item.value" :label="item.label"
		:value="item.value">
	</el-option>
</el-form-item>
相关推荐
simon_luv_pho15 分钟前
一行代码把网页变成 AI Agent?
前端
兆子龙22 分钟前
模块联邦(Module Federation)详解:从概念到手把手 Demo
前端·架构
ZFSS25 分钟前
Kimi Chat Completion API 申请及使用
前端·人工智能
没想好d25 分钟前
通用管理后台组件库-8-表格组件
前端
前端Hardy30 分钟前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy31 分钟前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
布列瑟农的星空1 小时前
rsbuild mock 插件开发指南
前端
用泥种荷花1 小时前
【LangChain.js学习】 文档加载(Loader)与文本分割全解析
前端
cxxcode2 小时前
Vite 热更新(HMR)原理详解
前端
HelloReader2 小时前
Tauri 架构从“WebView + Rust”到完整工具链与生态
前端