update

components/apolloTable/component/DragFixed.tsx

 import React from 'react';
 import { ResizableBox } from 'react-resizable';
 import styles from './DragFixed.less';
+import { getCache, saveCache } from '../utils/cache';
 
 const DragFixed = (props: any) => {
-    const { tableId, initLeft, initTop, onResizeStart, showColumns, columnWidth, columns, onResizeStop } = props;
+    const {
+        tableId,
+        initLeft,
+        initTop,
+        onResizeStart,
+        showColumns,
+        columnWidth,
+        columns,
+        onResizeStop,
+        cachedFeAttr,
+    } = props;
     // 表格
     const container: any = document.querySelector(`#apolloTable_${tableId}`);
     // 滑块wrap
@@ -109,6 +120,16 @@ const DragFixed = (props: any) => {
                     item.fixed = '';
                 }
             }
+            if (cachedFeAttr) {
+                const cachedCols = getCache({ tableId });
+                if (cachedCols) {
+                    cachedCols[item.columnName] = {
+                        ...cachedCols[item.columnName],
+                        fixed: item.fixed,
+                    };
+                    saveCache({ tableId, data: cachedCols });
+                }
+            }
             newColumns.push(item);
         });
         if (typeof onResizeStop === 'function') {

components/apolloTable/component/DragResized.less

@@ -9,4 +9,7 @@
     cursor: ew-resize;
     z-index: 1;
     background: #ececec;
+    &:hover {
+        background-color: rgb(33, 150, 243);
+    }
 }

components/apolloTable/component/RightDragFixed.tsx

 import React from 'react';
 import { ResizableBox } from 'react-resizable';
 import styles from './DragFixed.less';
+import { getCache, saveCache } from '../utils/cache';
 
 const DragFixed = (props: any) => {
     const {
@@ -13,6 +14,7 @@ const DragFixed = (props: any) => {
         columns,
         onResizeStop,
         paddingRight,
+        cachedFeAttr,
     } = props;
     // 表格
     const container: any = document.querySelector(`#apolloTable_${tableId}`);
@@ -124,6 +126,16 @@ const DragFixed = (props: any) => {
                     item.fixed = '';
                 }
             }
+            if (cachedFeAttr) {
+                const cachedCols = getCache({ tableId });
+                if (cachedCols) {
+                    cachedCols[item.columnName] = {
+                        ...cachedCols[item.columnName],
+                        fixed: item.fixed,
+                    };
+                    saveCache({ tableId, data: cachedCols });
+                }
+            }
             newColumns.push(item);
         });
         if (typeof onResizeStop === 'function') {

components/apolloTable/component/defaultConfig.ts

+export const getDefaultTableConfig = (config: any) => {
+    const { rowHeight, headerHeight, columnWidth } = config;
+    return {
+        overscanColumnCount: 5,
+        overscanRowCount: 5,
+        columnWidth: columnWidth || 150,
+        rowHeight: rowHeight || 80,
+        headerHeight: headerHeight || 60,
+    };
+};

components/apolloTable/utils/memCols.ts

+import memoizeOne from 'memoize-one';
+import { ColumnProps } from '../component/interface';
+import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache';
+
+// 获取左侧固定列数量
+export const getLeftColumns = (columns: ColumnProps[]) => {
+    return columns.filter((item) => {
+        return !!item.showStatus && item.fixed && item.fixed !== 'right';
+    });
+};
+
+// 获取右侧固定列数量
+export const getRightColumns = (columns: ColumnProps[]) => {
+    return columns.filter((item) => {
+        return !!item.showStatus && item.fixed === 'right';
+    });
+};
+
+// 获取表格显示列
+export const getShowColumns = (columns: ColumnProps[]) => {
+    return columns.filter((item) => {
+        return !!item.showStatus && (!item.hideScope || item.hideScope.indexOf('LIST') === -1);
+    });
+};
+
+// 获取右侧列总宽度
+export const getTotalWidth = (columns: ColumnProps[], columnWidth: number) => {
+    let configWidth = 0;
+    let configWidthLen = 0;
+    let defaultWidth = 0;
+    let defaultWidthLen = 0;
+    columns.map((item: any) => {
+        if (item.width) {
+            configWidth += item.width;
+            configWidthLen += 1;
+        } else {
+            defaultWidth += columnWidth;
+            defaultWidthLen += 1;
+        }
+    });
+    const totalWidth = configWidth + defaultWidth;
+    return {
+        configWidth,
+        defaultWidth,
+        totalWidth,
+        configWidthLen,
+        defaultWidthLen,
+    };
+};
+
+// 获取左侧固定列总宽度
+export const getLeftWidth = (
+    leftColumns: ColumnProps[],
+    columns: ColumnProps[],
+    columnWidth: number,
+    tableWidth: number,
+) => {
+    const { totalWidth, configWidth, defaultWidthLen } = memoizeOne(getTotalWidth(columns, columnWidth));
+    let colWidth = columnWidth;
+    if (totalWidth < tableWidth) {
+        colWidth = Math.floor((tableWidth - configWidth) / defaultWidthLen);
+    }
+    let total = 0;
+    leftColumns.map((item) => {
+        total += item.width || colWidth;
+    });
+    return total;
+};
+
+// 格式化列数据（添加缓存的前端属性）
+export const getFormatColumns = (columns: ColumnProps[], cachedFeAttr: boolean, tableId: number | string) => {
+    columns.sort((a, b) => {
+        return a.orderNo - b.orderNo;
+    });
+    if (cachedFeAttr) {
+        const cachedCols = getCache({ tableId });
+        if (cachedCols) {
+            columns = columns.map((item: any) => {
+                return {
+                    ...item,
+                    ...cachedCols[item.columnName],
+                };
+            });
+        } else {
+            const data: any = {};
+            columns.map((item: any) => {
+                data[item.columnName] = {
+                    columnName: item.columnName,
+                    width: item.width,
+                    align: item.align,
+                    fixed: item.fixed,
+                    hideScope: item.hideScope,
+                    orderNo: item.orderNo,
+                };
+            });
+            saveCache({ tableId, data });
+        }
+    }
+    return columns;
+};