fix(table): table setting error #174 #165

Author: anncwb

CHANGELOG.zh_CN.md

@@ -7,6 +7,7 @@
 - `ant-design-vue`组件注册移动到`components/registerComponent`
 - 移除 `setup` 文件夹
 - 升级到`vite2`
+- 图片预览改为`Image`组件实现,暂时移除函数式使用方式
 
 ### ✨ Features
 
@@ -16,7 +17,7 @@
 - 新增`PageWrapper`组件。并应用于示例页面
 - 新增标签页折叠功能
 - 兼容旧版浏览器
-- tinymce 新增图片上传·
+- tinymce 新增图片上传
 
 ### 🐛 Bug Fixes
 

package.json

@@ -35,7 +35,7 @@
     "vditor": "^3.7.5",
     "vue": "^3.0.5",
     "vue-i18n": "^9.0.0-rc.1",
-    "vue-router": "^4.0.2",
+    "vue-router": "^4.0.3",
     "vue-types": "^3.0.1",
     "vuex": "^4.0.0-rc.2",
     "vuex-module-decorators": "^1.0.1",

src/components/Table/src/BasicTable.vue

@@ -143,10 +143,14 @@
         emit
       );
 
-      const { getViewColumns, getColumns, setColumns, getColumnsRef, getCacheColumns } = useColumns(
-        getProps,
-        getPaginationInfo
-      );
+      const {
+        getViewColumns,
+        getColumns,
+        setCacheColumnsByField,
+        setColumns,
+        getColumnsRef,
+        getCacheColumns,
+      } = useColumns(getProps, getPaginationInfo);
 
       const { getScrollRef, redoHeight } = useTableScroll(
         getProps,
@@ -238,6 +242,7 @@
         updateTableData,
         setShowPagination,
         getShowPagination,
+        setCacheColumnsByField,
         getSize: () => {
           return unref(getBindValues).size as SizeType;
         },

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -326,7 +326,7 @@
         if (isFixed && !item.width) {
           item.width = 100;
         }
-
+        table.setCacheColumnsByField?.(item.dataIndex, { fixed: isFixed });
         table.setColumns(columns);
       }
 

src/components/Table/src/hooks/useColumns.ts

@@ -173,6 +173,17 @@ export function useColumns(
   //   cacheColumns = columns?.filter((item) => !item.flag) ?? [];
   // });
 
+  function setCacheColumnsByField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
+    if (!dataIndex || !value) {
+      return;
+    }
+    cacheColumns.forEach((item) => {
+      if (item.dataIndex === dataIndex) {
+        Object.assign(item, value);
+        return;
+      }
+    });
+  }
   /**
    * set columns
    * @param columnList key｜column
@@ -237,7 +248,14 @@ export function useColumns(
     return cacheColumns;
   }
 
-  return { getColumnsRef, getCacheColumns, getColumns, setColumns, getViewColumns };
+  return {
+    getColumnsRef,
+    getCacheColumns,
+    getColumns,
+    setColumns,
+    getViewColumns,
+    setCacheColumnsByField,
+  };
 }
 
 function sortFixedColumn(columns: BasicColumn[]) {

src/components/Table/src/hooks/useTableScroll.ts

@@ -127,11 +127,10 @@ export function useTableScroll(
       width += 60;
     }
 
-    // TODO propsdth ?? 0;
+    // TODO props ?? 0;
     const NORMAL_WIDTH = 150;
 
-    const columns = unref(columnsRef);
-
+    const columns = unref(columnsRef).filter((item) => !item.defaultHidden);
     columns.forEach((item) => {
       width += Number.parseInt(item.width as string) || 0;
     });
@@ -150,7 +149,6 @@ export function useTableScroll(
   const getScrollRef = computed(() => {
     const tableHeight = unref(tableHeightRef);
     const { canResize, scroll } = unref(propsRef);
-
     return {
       x: unref(getScrollX),
       y: canResize ? tableHeight : null,

src/components/Table/src/types/table.ts

@@ -104,6 +104,7 @@ export interface TableActionType {
   updateTableData: (index: number, key: string, value: any) => Recordable;
   setShowPagination: (show: boolean) => Promise<void>;
   getShowPagination: () => boolean;
+  setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void;
 }
 
 export interface FetchSetting {

src/utils/http/axios/index.ts

@@ -108,10 +108,8 @@ const transform: AxiosTransform = {
     const params = config.params || {};
     if (config.method?.toUpperCase() === RequestEnum.GET) {
       if (!isString(params)) {
-        config.data = {
-          // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
-          params: Object.assign(params || {}, createNow(joinTime, false)),
-        };
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, createNow(joinTime, false));
       } else {
         // 兼容restful风格
         config.url = config.url + params + `${createNow(joinTime, true)}`;

src/views/demo/table/CustomerCell.vue

@@ -35,6 +35,7 @@
       dataIndex: 'category',
       width: 80,
       align: 'center',
+      defaultHidden: true,
       slots: { customRender: 'category' },
     },
     {
@@ -74,6 +75,7 @@
         api: demoListApi,
         columns: columns,
         bordered: true,
+        showTableSetting: true,
       });
 
       return {

yarn.lock

@@ -7887,10 +7887,10 @@ vue-i18n@^9.0.0-rc.1:
     "@intlify/shared" "9.0.0-rc.1"
     "@vue/devtools-api" "^6.0.0-beta.3"
 
-vue-router@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.2.tgz#5702bf8fa14535b80142fde226bf41a84917b1f4"
-  integrity sha512-LCsTSb5H25dZCxjsLasM9UED1BTg9vyTnp0Z9UhwC6QoqgLuHr/ySf7hjI/V0j2+xCKqJtecfmpghk6U8I2e4w==
+vue-router@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
+  integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
 
 vue-types@^3.0.0, vue-types@^3.0.1:
   version "3.0.1"