ElementPlus的Form的表单校验本地运行正常，发布上线后失效问题

在代码开发时，使用Form表单的校验功能，在开发环境运行正常。发布上线后出现校验失效问题

Vite+js+Vue3+Element Plus

html代码

 <!-- 编辑 对话框 -->
    <el-dialog v-model="DialogVisibleEdit" title="编辑订单状态" center draggable :before-close="handleEditClose" width="400px" style="padding-right: 20px;">
      <el-form :model=" EditForm" :rules="AddRules" ref="EditRef" label-width="80px" :size="counter.ISSize">
        <el-form-item label="发货状态" prop="status">
          <el-select v-model="EditForm.status" class="m-2" placeholder="请选择发货状态">
            <el-option label="未发货" :value="1" />
            <el-option label="已发货" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleEditClose" :size="counter.ISSize">关闭</el-button>
          <el-button type="primary" :size="counter.ISSize" @click="EditClick(EditRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>

js代码

let EditRef = null
// 校验规则
const AddRules = ref(
  {
    status: [{ required: true, message: '请选择发货状态', trigger: 'change' }]
  }
)
// 编辑显示隐藏
let DialogVisibleEdit = ref(false)
// 编辑表单
let EditForm = reactive({})
// 点击编辑
const OnhandleEdit = (val) => {
  DialogVisibleEdit.value = true
  EditForm = val
}

// 编辑提交
const EditClick = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      UPDATQORDERDETAIL(EditForm).then(res => {
        DialogVisibleEdit.value = false
        if (res.code == 0) {
          ElMessage({ type: 'success', message: `${res.message}`, })
          GET()
        }
        else {
          ElMessage({ type: 'info', message: `${res.message}`, })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

看起来平平无奇的代码，本地也是正常运行，打包上线之后自己测试了一下功能发现，点击表单确定之后什么也没触发，找了半天也没看见什么解决方法，起初以为打包配置有问题，修改了半天没有解决，后来尝试更换校验的对象发现可以进行正常操作

修改后

html代码

   <!-- 编辑 对话框 -->
    <el-dialog v-model="DialogVisibleEdit" title="编辑订单状态" center draggable :before-close="handleEditClose" width="400px" style="padding-right: 20px;">
      <el-form :model=" EditForm" :rules="AddRules" ref="EditRef" label-width="80px" :size="counter.ISSize">
        <el-form-item label="发货状态" prop="status">
          <el-select v-model="EditForm.status" class="m-2" placeholder="请选择发货状态">
            <el-option label="未发货" :value="1" />
            <el-option label="已发货" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleEditClose" :size="counter.ISSize">关闭</el-button>
          <el-button type="primary" :size="counter.ISSize" @click="EditClick">确定</el-button>
        </span>
      </template>
    </el-dialog>

js代码

let EditRef = ref(null)
// 校验规则
const AddRules = ref(
  {
    status: [{ required: true, message: '请选择发货状态', trigger: 'change' }]
  }
)


// 编辑显示隐藏
let DialogVisibleEdit = ref(false)
// 编辑表单
let EditForm = reactive({})
// 点击编辑
const OnhandleEdit = (val) => {
  DialogVisibleEdit.value = true
  EditForm = val
}
// 编辑提交
const EditClick = () => {
  if (!EditRef.value) return
  EditRef.value.validate((valid, fields) => {
    if (valid) {
      UPDATQORDERDETAIL(EditForm).then(res => {
        DialogVisibleEdit.value = false
        if (res.code == 0) {
          ElMessage({ type: 'success', message: `${res.message}`, })
          GET()
        }
        else {
          ElMessage({ type: 'info', message: `${res.message}`, })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

总结发现 应该是 EditRef 的定义问题，不使用ref定义的数据不会更新视图，当使用ref定义之后 form表单的@click="EditClick" 事件可以不传参 然后校验时使用 EditRef.value.validate去进行校验，如果想使用@click="EditClick(EditRef)" 就需要使用在接收时这样写
 

//<el-button type="primary" :size="counter.ISSize" @click="EditClick(EditRef)">
//确定</el-button>

const EditClick = (formEl) => {
  if (!formEl) return
 formEl.validate((valid, fields) => {}

}