VUE3 表单setup踩坑（已解决）附源码

点击清除按钮，清空表单后自动校验。。。

代码如下：

页面打印：

 点击 清空 之前

点击 清空 之后

---

后来我想了想搜索不是每个字段都必填啊！！！于是就不设置成必填。

上源码！！！

<template>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
      size="default" @submit.prevent>
      <el-form-item label="id搜索" prop="idsearch" class="label-center-align">
        <el-input v-model="formData.idsearch" type="text" clearable></el-input>
      </el-form-item>
      <el-form-item label="日期范围" prop="daterange" class="label-center-align">
        <el-date-picker is-range v-model="formData.daterange" type="daterange" class="full-width-input"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
      </el-form-item>
      <el-form-item label="号码搜索" prop="hmsearch" class="label-center-align">
        <el-input v-model="formData.hmsearch" type="text" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round>搜索</el-button>
        <el-button round @click="clear">清空</el-button>
     </el-form-item>
    </el-form>
    
  </template>
  <script>
   import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance
  }
  from 'vue'
  export default defineComponent({
    name:'test2',
    components: {},
    props: {},
    setup() {
      const state = reactive({
        formData: {
          idsearch: "",
          daterange: null,
          hmsearch: "",
        },
        rules: {
           idsearch: [{
            pattern: /^[一-龥]+$/,
            trigger: ['blur', 'change'],
            message: '请输入正确id'
          }],
          hmsearch: [{
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入正确号码'
          }]
        },
      })
      const instance = getCurrentInstance()
      const submitForm = () => {
        instance.ctx.$refs['vForm'].validate(valid => {
          if (!valid) return
          //TODO: 提交表单
        })
      }
      const resetForm = () => {
        instance.ctx.$refs['vForm'].resetFields()
      }
      let clear = () =>{
        state.formData.idsearch = "",
        state.formData.daterange = "",
        state.formData.hmsearch = ""
      }
      return {
        ...toRefs(state),
        submitForm,
        resetForm,
        clear
      }
    }
  })
  
  </script>
  
<style lang="scss">


</style>