vue.js javascript ecmascript elementui 前端 el-form表单验证：满足校验之后校验信息仍然存在问题

一，问题背景

重要性做了必填校验， 重要性组件：

v-for="item in importanceList"

:key="item.value"

size="mini"

round

:type="item.value === value ? 'primary' : ''"

@click="changeImportanceSelect(item.value)"

>

{{ item.label }}

问题抛出： 当重要性有值时，校验信息应该消失。

二. 原因排查：

表单校验相关代码

importanceLevel: [{ required: true, message: '请选择重要性', trigger: ['blur', 'change'] }],

虽然重要性字段值改变，但是并没有触发校验，所以当首次提交整张表单时产生的错误信息并没有消失。 查了element相关源码才发现，除了el-select和el-input等组件外，其它组件内部并没有封装input和change事件，所以校验会一直存在

三.解决方案

借助show-message属性自定义错误信息的显示 代码如下：

v-for="item in importanceList"

:key="item.value"

size="mini"

round

:type="item.value === value ? 'primary' : ''"

@click="changeImportanceSelect(item.value)"

>

{{ item.label }}

好文推荐

 您阅读本篇文章共花了：