2021-07-28 vue3 el-form 提交时验证表单

点击提交时，一定要传表单绑定的值才能验证

<Dialog
      title="新建角色"
      v-model="dialogVisible"
      width="400px"
      @confirm="Confirm(addForm)" 	//提交表单
    >       		//这里的表单是放在弹窗里的
     <el-form :model="ruleForm" ref="addForm" :rules="addRules"> 	//:model、ref、:rules必写
      <el-form-item label="名称" prop="Name"> //prop必须写
        <el-input placeholder="请输入" v-model="ruleForm.Name"></el-input> 	//必须绑定form里的值
      </el-form-item>
  	</el-form>
</Dialog>

JS:

import { unref} from 'vue'

setup里：

const addForm = ref('')
const ruleForm = reactive({
     Name: ''
})
const addRules = reactive({
     Name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { max: 8, message: '最多输入8位字符', trigger: 'blur' }
     ]
})
const Confirm = (ref: any) => {
      unref(ref).validate(async (valid) => {
        if (valid) {
         ......     //提交接口
          dialogVisible.value = false
          unref(ref).resetFields()  //重置表单
        } else {
          console.log('error submit!!')
          return false
       }
    })
 }