博客

一，问题背景

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

<el-col :span="24">
    <el-form-item label="重要性" :prop="setFormItemProp">
      <el-button
        v-for="item in importanceList"
        :key="item.value"
        size="mini"
        round
        :type="item.value === value ? 'primary' : ''"
        @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-button
        v-for="item in importanceList"
        :key="item.value"
        size="mini"
        round
        :type="item.value === value ? 'primary' : ''"
        @click="changeImportanceSelect(item.value)"
      >
        {{ item.label }}
      </el-button>
    </el-form-item>