fix(table): table columns setting error

vbenjs · Jan 2, 2021 · af55511 · af55511
1 parent aa596af
commit af55511
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -4,6 +4,10 @@
 
 - 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
 
+### 🐛 Bug Fixes
+
+- 修复表格列配置已知问题
+
 ## 2.0.0-rc.15 (2020-12-31)
 
 ### ✨ 表格破坏性更新

diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts
@@ -1,6 +1,6 @@
 import type { BasicColumn, BasicTableProps, CellFormat, GetColumnsParams } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
-import { unref, ComputedRef, Ref, computed, watchEffect, ref, toRaw } from 'vue';
+import { unref, ComputedRef, Ref, computed, watch, ref, toRaw } from 'vue';
 import { isBoolean, isArray, isString, isObject } from '/@/utils/is';
 import { DEFAULT_ALIGN, PAGE_SIZE, INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG } from '../const';
 import { useI18n } from '/@/hooks/web/useI18n';
@@ -156,11 +156,22 @@ export function useColumns(
     return viewColumns;
   });
 
-  watchEffect(() => {
-    const columns = toRaw(unref(propsRef).columns);
-    columnsRef.value = columns;
-    cacheColumns = columns?.filter((item) => !item.flag) ?? [];
-  });
+  watch(
+    () => unref(propsRef).columns,
+    (columns) => {
+      columnsRef.value = columns;
+      cacheColumns = columns?.filter((item) => !item.flag) ?? [];
+    }
+  );
+
+  // watchEffect(() => {
+  //   const columns = toRaw(unref(propsRef).columns);
+  //   console.log('======================');
+  //   console.log(111);
+  //   console.log('======================');
+  //   columnsRef.value = columns;
+  //   cacheColumns = columns?.filter((item) => !item.flag) ?? [];
+  // });
 
   /**
    * set columns

diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
@@ -3,11 +3,10 @@ import type { PaginationProps } from '../types/pagination';
 import type { DynamicProps } from '/@/types/utils';
 import { getDynamicProps } from '/@/utils';
 
-import { ref, onUnmounted, unref } from 'vue';
+import { ref, onUnmounted, unref, watch } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { isInSetup } from '/@/utils/helper/vueHelper';
 import { error } from '/@/utils/log';
-import { watchEffect } from 'vue';
 import type { FormActionType } from '/@/components/Form';
 
 type Props = Partial<DynamicProps<BasicTableProps>>;
@@ -33,12 +32,18 @@ export function useTable(
     }
     tableRef.value = instance;
     formRef.value = formInstance;
-    // tableProps && instance.setProps(tableProps);
+    tableProps && instance.setProps(getDynamicProps(tableProps));
     loadedRef.value = true;
 
-    watchEffect(() => {
-      tableProps && instance.setProps(getDynamicProps(tableProps));
-    });
+    watch(
+      () => tableProps,
+      () => {
+        tableProps && instance.setProps(getDynamicProps(tableProps));
+      },
+      {
+        immediate: true,
+      }
+    );
   }
 
   function getTableInstance(): TableActionType {