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

vueAPI链接：https://v3.cn.vuejs.org/guide/composition-api-template-refs.html#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8

vue3获取动态ref：

script:

    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,
        }
    },