vue3中使用element-plus的el-form遍历表单和表单验证,动态获取ref

时间:2024-12-10 15:26:57
  • setup() {
  • let rules = reactive({
  • thisWeek: [
  • {
  • required: true,
  • message: '请填写本周任务',
  • trigger: 'blur',
  • },
  • ],
  • nextWeek: [
  • {
  • required: true,
  • message: '请填写下周计划',
  • trigger: 'blur',
  • },
  • ],
  • workingHours: [
  • {
  • required: true,
  • message: '请填写工时',
  • trigger: 'blur',
  • },
  • ],
  • })
  • const userWorkFormRefs = ref([])
  • // 我的表单提交方法
  • function onSubmit(v: any) {
  • console.log('userWorkFormRefs', userWorkFormRefs)
  • let formRef = null as any
  • userWorkFormRefs.value?.forEach((form: any) => {
  • if (form.model.id === v.id) {
  • formRef = form
  • }
  • })
  • // 表单校验
  • if (!formRef) {
  • return
  • }
  • formRef.validate((valid: any) => {
  • if (valid) {
  • }
  • })
  • }
  • // 确保在每次更新之前重置ref
  • onBeforeUpdate(() => {
  • userWorkFormRefs.value = []
  • })
  • return {
  • rules,
  • onSubmit,
  • userWorkFormRefs,
  • }
  • },