Selaa lähdekoodia

perf(smart-table): 优化添加修改弹窗导致table重新渲染的问题

shizhongming 2 vuotta sitten
vanhempi
commit
50770bf5d2

+ 16 - 2
src/components/SmartTable/src/components/SmartTableAddEditModal.tsx

@@ -1,6 +1,6 @@
 import type { SmartAddEditModalCallbackData } from '@/components/SmartTable';
 
-import { defineComponent, ref, unref } from 'vue';
+import { computed, defineComponent, ref, unref } from 'vue';
 
 import { message } from 'ant-design-vue';
 
@@ -27,6 +27,9 @@ export default defineComponent({
   setup(props) {
     const { t } = useI18n();
     const isAddRef = ref(true);
+    const computedTitle = computed(() => {
+      return unref(isAddRef) ? t('common.title.add') : t('common.title.edit');
+    });
 
     const [registerForm, formAction] = useForm();
     const { resetFields, getFieldsValue, setFieldsValue, validate, validateFields } = formAction;
@@ -135,13 +138,24 @@ export default defineComponent({
       validate,
       validateFields,
       getFormAction: () => formAction,
+      computedTitle,
     };
   },
   render() {
-    const { $attrs, register, registerForm, handleSubmit, $slots, tableId, formConfig } = this;
+    const {
+      $attrs,
+      register,
+      registerForm,
+      handleSubmit,
+      $slots,
+      tableId,
+      formConfig,
+      computedTitle,
+    } = this;
     const attrs = {
       ...$attrs,
       onRegister: register,
+      title: computedTitle,
     };
     return (
       <BasicModal {...attrs} onOk={handleSubmit}>

+ 1 - 9
src/components/SmartTable/src/hooks/useTableModalAddEdit.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref, Slots } from 'vue';
+import type { ComputedRef, Slots } from 'vue';
 import type { SmartAddEditModalCallbackData, SmartTableProps } from '@/components/SmartTable';
 import type { FormProps } from '@/components/Form';
 import type { ModalProps } from '@/components/Modal';
@@ -106,7 +106,6 @@ export const useTableModalAddEditConfig = (
     const { modalConfig, beforeSave, afterSave } = addEditConfig!;
     const saveFunction = proxyConfig?.ajax?.save;
     return {
-      ...getDefaultModalConfig(isAddRef, t),
       ...(modalConfig || {}),
       beforeSave,
       saveFunction,
@@ -204,10 +203,3 @@ const getDefaultFormConfig = (): Partial<FormProps> => {
     },
   };
 };
-
-const getDefaultModalConfig = (isAddRef: Ref<boolean>, t: Function): Partial<ModalProps> => {
-  const title = unref(isAddRef) ? t('common.title.add') : t('common.title.edit');
-  return {
-    title,
-  };
-};