一,问题背景
重要性做了必填校验,
重要性组件:
<el-col :span="24"><el-form-item label="重要性" :prop="setFormItemProp"><el-buttonv-for="item in importanceList":key="item.value"size="mini"round:type="item.value === value " />@click="changeImportanceSelect(item.value)">{{ item.label }}</el-button></el-form-item></el-col>
问题抛出: 当重要性有值时,校验信息应该消失。
二. 原因排查:
表单校验相关代码
importanceLevel: [{ required: true, message: '请选择重要性', trigger: ['blur', 'change'] }],
虽然重要性字段值改变,但是并没有触发校验,所以当首次提交整张表单时产生的错误信息并没有消失。
查了element相关源码才发现,除了el-select和el-input等组件外,其它组件内部并没有封装input和change事件,所以校验会一直存在
三.解决方案
借助show-message属性自定义错误信息的显示
代码如下:
<el-form-item label="重要性" :prop="setFormItemProp" :show-message="!value"><el-buttonv-for="item in importanceList":key="item.value"size="mini"round:type="item.value === value " />@click="changeImportanceSelect(item.value)">{{ item.label }}</el-button></el-form-item>