一,问题背景

  1. 重要性做了必填校验,
    重要性组件:
<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>