perf: 优化Form事件传递

src/components/Form/src/Form.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
 import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
+import { ElForm, ElFormItem, ElRow, ElCol, FormItemProp } from 'element-plus'
 import { componentMap } from './helper/componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
@@ -57,7 +57,7 @@ export default defineComponent({
     // 表单label宽度
     labelWidth: propTypes.oneOfType([String, Number]).def('auto')
   },
-  emits: ['register'],
+  emits: ['register', 'validate'],
   setup(props, { slots, expose, emit }) {
     // element form 实例
     const elFormRef = ref<ComponentRef<typeof ElForm>>()
@@ -339,12 +339,17 @@ export default defineComponent({
       return props
     }
 
+    const onValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
+      emit('validate', prop, isValid, message)
+    }
+
     return () => (
       <ElForm
         ref={elFormRef}
         {...getFormBindValue()}
         model={unref(getProps).isCustom ? unref(getProps).model : formModel}
         class={prefixCls}
+        onValidate={onValidate}
       >
         {{
           // 如果需要自定义，就什么都不渲染，而是提供默认插槽

src/components/Search/src/Search.vue

@@ -8,6 +8,7 @@ import { cloneDeep, set } from 'lodash-es'
 import { initModel } from '@/components/Form/src/helper'
 import ActionButton from './components/ActionButton.vue'
 import { SearchProps } from './types'
+import { FormItemProp } from 'element-plus'
 
 const props = defineProps({
   // 生成Form的布局结构数组
@@ -42,7 +43,7 @@ const props = defineProps({
   resetLoading: propTypes.bool.def(false)
 })
 
-const emit = defineEmits(['search', 'reset', 'register'])
+const emit = defineEmits(['search', 'reset', 'register', 'validate'])
 
 const visible = ref(true)
 
@@ -214,6 +215,10 @@ onMounted(() => {
 })
 
 defineExpose(defaultExpose)
+
+const onFormValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
+  emit('validate', prop, isValid, message)
+}
 </script>
 
 <template>
@@ -226,6 +231,7 @@ defineExpose(defaultExpose)
     :is-col="getProps.isCol"
     :schema="newSchema"
     @register="formRegister"
+    @validate="onFormValidate"
   />
 
   <template v-if="layout === 'bottom'">

src/components/Table/src/Table.vue

@@ -182,7 +182,7 @@ export default defineComponent({
       ) : undefined
     }
 
-    const rnderTreeTableColumn = (columnsChildren: TableColumn[]) => {
+    const renderTreeTableColumn = (columnsChildren: TableColumn[]) => {
       const { align, headerAlign, showOverflowTooltip } = unref(getProps)
       return columnsChildren.map((v) => {
         const props = { ...v }
@@ -198,7 +198,7 @@ export default defineComponent({
             {{
               default: (data: TableSlotDefault) =>
                 v.children && v.children.length
-                  ? rnderTableColumn(v.children)
+                  ? renderTableColumn(v.children)
                   : // @ts-ignore
                     getSlot(slots, v.field, data) ||
                     v?.formatter?.(data.row, data.column, data.row[v.field], data.$index) ||
@@ -211,7 +211,7 @@ export default defineComponent({
       })
     }
 
-    const rnderTableColumn = (columnsChildren?: TableColumn[]) => {
+    const renderTableColumn = (columnsChildren?: TableColumn[]) => {
       const {
         columns,
         reserveIndex,
@@ -253,7 +253,7 @@ export default defineComponent({
                 {{
                   default: (data: TableSlotDefault) =>
                     v.children && v.children.length
-                      ? rnderTreeTableColumn(v.children)
+                      ? renderTreeTableColumn(v.children)
                       : // @ts-ignore
                         getSlot(slots, v.field, data) ||
                         v?.formatter?.(data.row, data.column, data.row[v.field], data.$index) ||
@@ -278,7 +278,7 @@ export default defineComponent({
           {...unref(getBindValue)}
         >
           {{
-            default: () => rnderTableColumn(),
+            default: () => renderTableColumn(),
             // @ts-ignore
             append: () => getSlot(slots, 'append')
           }}