Element ui vue2(class-api)+TS 中的表单校验记录

写后台项目经常使用，仅此记录分享一下
表单验证在el-form-item中需要prop，值为表单下对应的值，ref中调用的时候需要断言any或者HTMLFormElement，还有其他办法

注意点⚠️：在使用ref获取dom元素的时候

---这里无法写数据，写了就会报错
(this.$refs.addFormRef as HTMLFormElement).validate((valid: any, model: any) => {})

如果连起来一起写，在他的上面就无法书写数据，会警告，不知道为何，查了资料也没查出来
解决方法：将ref获取的dom元素使用一个变量保存起来，然后再使用变量进行验证

使用vue2(class-api)+TS的使用过程

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef">
  <el-form-item label="商品名称" prop="goods_name">
   <el-input v-model="addForm.goods_name"></el-input>
  </el-form-item>
  <span slot="footer" class="dialog-footer">
       <el-button @click="addDialog = false">取り消し</el-button>
       <el-button @click="confirmAddNewForm()">確 定</el-button>
     </span>
</el-form>

-------------------------------------------------------
addForm = {
  goods_name:''
},
// 校验
addFormRules = {
  goods_name:[
    {
      required: true,message:'请输入商品名称',trigger:blur
    }
  ]
}
// 方法
confirmAddNewForm(){
	const addRef = (this.$refs.addFormRef as HTMLFormElement)
	addRef.validate((valid: any, model: any) => {
	    console.log(valid) // 验证通过 boolean值，都按照要求填写了返回true，失败则返回false
	    console.log(model) // required: true,message:'请输入商品名称',trigger:blur
	    if(valid){
	      // 成功，调用接口
	    } else {
          // 失败
        }
	})
}

// 推荐使用
(this.$refs.addFormRef as HTMLFormElement).validate((valid: any, model: any) => {})
// 不推荐
(this.$refs.addFormRef as HTMLFormElement).validate((valid: any, model: any) => {})