vue 的rule规则校验注意点

el-form 中有三个参数控制校验。

注意：校验名和控件绑定名要配对，如checkItem

示例如下：

<el-form label-width="100px" :model="exportForm" :rules="exportRules" ref="exportForm">
    <el-form-item label="检测项" prop="checkItem">
         <el-select v-model="exportForm.checkItem"> </el-select>
     </el-form-item>
</el-form>

  其data中的定义如下： 

exportForm:{
        checkItem:'',
      },

exportRules:{
        checkItem: [
          {
            required: true,
            message: "请输入检测项",
            trigger: "change"
          }
        ]
      },

 

保存时校验方式如下：

exportData(){
      this.$refs.exportForm.validate(
        valid =>{
          if (valid) {
            this.$g(`exportReport`, {
              ...this.exportForm
            }, {responseType: 'blob'}).then(
              res => {
                this.download(res);
              }
            );
          }
        }
      )
    },