组件element的form表单局部验证用法

1.组件element里form表单里有内置的验证规则，有时全局表单验证达不到需求时，有些表单内的值改变了却还是显示错误信息，如图

 在富文本内容改变后还是显示了错误信息，这个时候就要用上局部验证方法

根据element的form表单文档可以得到validateField方法，局部表单验证

validateField

对部分表单字段进行校验的方法

这时我们只需要在富文本中绑定一个change事件，监听值得变化，改变后就触发validateField方法

<template>
  <div class="box">
    <el-form :model="form" :rules="rules" ref="form" label-width="300px">
      <el-form-item label="学科" prop="a">
        <el-select v-model="form.a"></el-select>
      </el-form-item >
            <el-form-item label='阶段' prop="b">
        <el-select v-model="form.b"></el-select>
      </el-form-item>



        // 这里是需要验证的富文本
      <el-form-item label="富文本" prop="c">

        // 在
        <quillEditor v-model="form.c" @change="aaa"></quillEditor>
      </el-form-item>




    </el-form>
    <el-button @click="btnClick">点击验证</el-button>
  </div>
</template>

// 在script标签导入使用   使用前需要下载   npm i vue-quill-editor  富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'



 methods:{
  btnClick(){
    this.$refs.form.validate((bol)=>{
      console.log(bol);
    })
  },


//   当富文本的值改变后触发验证方法
  aaa(){
     this.$refs.form.validateField(['c'])
    console.log(1);
  }
 }