From a57bc41580286c7832c658308afdb308a89d2aff Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Fri, 7 Aug 2020 16:07:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96table?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/apolloTable/component/Column.less | 2 + .../apolloTable/component/DragFixed.tsx | 9 +- .../apolloTable/component/DragResized.tsx | 39 +++-- .../apolloTable/component/DragSorted.less | 3 - .../apolloTable/component/DragSorted.tsx | 84 ++++++++-- .../apolloTable/component/RightDragFixed.tsx | 9 +- components/apolloTable/component/Table.less | 28 +--- components/apolloTable/component/Table.tsx | 147 +++++++----------- components/apolloTable/component/index.tsx | 37 +++-- .../apolloTable/component/interface.tsx | 105 +++++++------ .../apolloTable/component/operate/index.tsx | 10 +- components/apolloTable/editForm/index.tsx | 6 - components/apolloTable/utils/memCols.ts | 10 +- 13 files changed, 259 insertions(+), 230 deletions(-) diff --git a/components/apolloTable/component/Column.less b/components/apolloTable/component/Column.less index 7c26642..7fa77e3 100644 --- a/components/apolloTable/component/Column.less +++ b/components/apolloTable/component/Column.less @@ -6,6 +6,8 @@ //justify-content: space-between; height: 100%; width: 100%; + padding: 0 @paddingLg; + overflow: hidden; .checkbox { margin-right: 10px; } diff --git a/components/apolloTable/component/DragFixed.tsx b/components/apolloTable/component/DragFixed.tsx index 9832791..6a82e90 100644 --- a/components/apolloTable/component/DragFixed.tsx +++ b/components/apolloTable/component/DragFixed.tsx @@ -14,6 +14,7 @@ const DragFixed = (props: any) => { columns, onResizeStop, cachedFeAttr, + onDragFixed, } = props; // 表格 const container: any = document.querySelector(`#apolloTable_${tableId}`); @@ -120,6 +121,7 @@ const DragFixed = (props: any) => { item.fixed = ''; } } + // 缓存 if (cachedFeAttr) { const cachedCols = getCache({ tableId }); if (cachedCols) { @@ -132,8 +134,13 @@ const DragFixed = (props: any) => { } newColumns.push(item); }); + // 业务回调 + if (typeof onDragFixed === 'function') { + onDragFixed(newColumns); + } + // table回调 if (typeof onResizeStop === 'function') { - onResizeStop({ columns: newColumns }); + onResizeStop(newColumns); } }; diff --git a/components/apolloTable/component/DragResized.tsx b/components/apolloTable/component/DragResized.tsx index 952870c..102e080 100644 --- a/components/apolloTable/component/DragResized.tsx +++ b/components/apolloTable/component/DragResized.tsx @@ -4,8 +4,10 @@ import { getCache, saveCache } from '../utils/cache'; import styles from './DragResized.less'; const DragResized = (props: any) => { - const { style, columnName, tableId, onResizeCb, cachedFeAttr } = props; - + const { style, columnName, tableId, canResized, onDragResized, onDragResizedCb, cachedFeAttr, columns } = props; + if (!canResized) { + return
{props.children}
; + } // 表格 const container: any = document.querySelector(`#apolloTable_${tableId}`); // 分割线wrap @@ -28,16 +30,31 @@ const DragResized = (props: any) => { // 列伸缩结束 const onResizeWidthStop = (e: any, { size }: { size: { width: number } }) => { dividerWrap.style.display = 'none'; - const cachedCols = getCache({ tableId }); - if (cachedFeAttr && cachedCols) { - cachedCols[columnName] = { - ...cachedCols[columnName], - width: size.width, - }; - saveCache({ tableId, data: cachedCols }); + const newColumns: any = []; + columns.map((item: any) => { + if (item.columnName === columnName) { + item.width = size.width; + } + newColumns.push(item); + }); + // 业务回调 + if (typeof onDragResized === 'function') { + onDragResized(newColumns); } - if (typeof onResizeCb === 'function') { - onResizeCb(columnName, size.width); + // table回调 + if (typeof onDragResizedCb === 'function') { + onDragResizedCb(newColumns); + } + // 缓存操作 + if (cachedFeAttr) { + const cachedCols = getCache({ tableId }); + if (cachedCols) { + cachedCols[columnName] = { + ...cachedCols[columnName], + width: size.width, + }; + saveCache({ tableId, data: cachedCols }); + } } }; diff --git a/components/apolloTable/component/DragSorted.less b/components/apolloTable/component/DragSorted.less index 051f152..9cfee3d 100644 --- a/components/apolloTable/component/DragSorted.less +++ b/components/apolloTable/component/DragSorted.less @@ -4,6 +4,3 @@ width: 100%; height: 100%; } -.draggableDiv { - cursor: move; -} diff --git a/components/apolloTable/component/DragSorted.tsx b/components/apolloTable/component/DragSorted.tsx index 0c4989c..655a0f2 100644 --- a/components/apolloTable/component/DragSorted.tsx +++ b/components/apolloTable/component/DragSorted.tsx @@ -1,9 +1,23 @@ import React, { useCallback, useRef } from 'react'; import classNames from 'classnames'; import s from './DragSorted.less'; +import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache'; const DragSorted = (props: any) => { - const { className, columnName, orderNo, onDropFinish, onScroll, canDrag, tableId } = props; + const { + columnName, + orderNo, + onDragSortedCb, + onDragSortedMove, + tableId, + canSorted, + onDragSorted, + columns, + cachedFeAttr, + } = props; + if (!canSorted) { + return
{props.children}
; + } // 长按计时器 const timer: any = useRef(null); // 表格滚动计时器 @@ -59,7 +73,7 @@ const DragSorted = (props: any) => { } }); - if (typeof onScroll === 'function') { + if (typeof onDragSortedMove === 'function') { let dir = ''; let step = 10; // 设置鼠标超出表格左右固定列两侧时的滚动事件 @@ -84,7 +98,7 @@ const DragSorted = (props: any) => { clearInterval(timerInterval.current); } timerInterval.current = setInterval(() => { - onScroll(dir, step); + onDragSortedMove(dir, step); }, 350); } else { // 需要停止，清除已有计时器 @@ -131,20 +145,62 @@ const DragSorted = (props: any) => { return; } // 拖动回调 - if (typeof onDropFinish === 'function') { - onDropFinish( - { columnName: dragColumn, orderNo: Number(dragColumnOrder) }, - { columnName: dropColumn, orderNo: Number(dropColumnOrder) }, - ); + const newColumns: any[] = []; + columns.map((item: any) => { + if (Number(dragColumnOrder) > Number(dropColumnOrder)) { + if (item.orderNo >= Number(dropColumnOrder) && item.orderNo <= Number(dragColumnOrder)) { + if (item.columnName === dragColumn) { + newColumns.push({ + ...item, + orderNo: Number(dropColumnOrder), + }); + } else { + newColumns.push({ + ...item, + orderNo: item.orderNo + 1, + }); + } + } else { + newColumns.push(item); + } + } else { + if (item.columnName === dragColumn) { + newColumns.push({ + ...item, + orderNo: Number(dropColumnOrder) - 1, + }); + } else if (item.orderNo >= Number(dragColumnOrder) && item.orderNo <= Number(dropColumnOrder)) { + newColumns.push({ + ...item, + orderNo: item.orderNo - 1, + }); + } else { + newColumns.push(item); + } + } + }); + if (cachedFeAttr) { + const cachedCols = getCache({ tableId }); + if (cachedCols) { + newColumns.map((item: any) => { + cachedCols[item.columnName] = { + ...cachedCols[item.columnName], + orderNo: item.orderNo, + }; + }); + saveCache({ tableId, data: cachedCols }); + } + } + if (typeof onDragSorted === 'function') { + onDragSorted(newColumns); } - }, [onDropFinish]); + // if (typeof onDragSortedCb === 'function') { + // onDragSortedCb(newColumns); + // } + }, [onDragSortedCb, onDragSorted, columns]); // 监听鼠标按下 const onMouseDown = useCallback( (e) => { - // 没有拖拽回调，默认不支持拖拽事件 - if (!canDrag) { - return; - } // 不是左键点击不作处理 if (e.button !== 0) { return; @@ -185,7 +241,7 @@ const DragSorted = (props: any) => { return (
{ onResizeStop, paddingRight, cachedFeAttr, + onDragFixed, } = props; // 表格 const container: any = document.querySelector(`#apolloTable_${tableId}`); @@ -126,6 +127,7 @@ const DragFixed = (props: any) => { item.fixed = ''; } } + // 缓存 if (cachedFeAttr) { const cachedCols = getCache({ tableId }); if (cachedCols) { @@ -138,8 +140,13 @@ const DragFixed = (props: any) => { } newColumns.push(item); }); + // 业务回调 + if (typeof onDragFixed === 'function') { + onDragFixed(newColumns); + } + // table回调 if (typeof onResizeStop === 'function') { - onResizeStop({ columns: newColumns }); + onResizeStop(newColumns); } }; diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less index 4f4fbca..086dbe3 100644 --- a/components/apolloTable/component/Table.less +++ b/components/apolloTable/component/Table.less @@ -10,7 +10,6 @@ height: 100%; .loading { position: absolute; - // top: 200px; left: 50%; transform: translate(-50%, -50%); z-index: 10; @@ -57,15 +56,10 @@ background-color: white; } -.sideGrid { - // overflow: hidden !important; +.sideGrid,.centerGrid { outline: none; } -.centerGrid { - outline: none; -} -.bodyRow { -} + .bodyCell { font-size: 20px; color: @textGeneralColor; @@ -76,24 +70,6 @@ overflow: hidden !important; outline: none; border-bottom: 1px solid #e8e8e8; - - .headerCell { - padding: 0 @paddingLg; - display: flex; - justify-content: flex-start; - align-items: center; - box-sizing: border-box; - background: #f7f9fa; - - .cellNo { - min-width: 50px; - } - - .cellContent { - flex: 1; - height: 100%; - } - } } .fillHandleWrapper { diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 033796c..e539c17 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -124,21 +124,29 @@ export default class AirTable extends Component { } return colWidth; }; - + // 重新计算单元格大小 + recomputeGridSize = () => { + if (this.grid1 && this.grid2) { + this.grid1.recomputeGridSize(); + this.grid2.recomputeGridSize(); + } + if (this.grid3 && this.grid4) { + this.grid3.recomputeGridSize(); + this.grid4.recomputeGridSize(); + } + if (this.grid5 && this.grid6) { + this.grid5.recomputeGridSize(); + this.grid6.recomputeGridSize(); + } + }; + // 页面大小变化回调 onResize = ({ width, height }: { width: number; height: number }) => { this.setState( { tableWidth: width, tableHeight: height, }, - () => { - this.grid1 && this.grid1.recomputeGridSize(); - this.grid2 && this.grid2.recomputeGridSize(); - this.grid3 && this.grid3.recomputeGridSize(); - this.grid4 && this.grid4.recomputeGridSize(); - this.grid5 && this.grid5.recomputeGridSize(); - this.grid6 && this.grid6.recomputeGridSize(); - }, + this.recomputeGridSize, ); }; @@ -152,27 +160,12 @@ export default class AirTable extends Component { }; // 列伸缩结束 - onResizeCb = (columnName: string, width: number) => { - const { columns } = this.state; - const newColumns: any = []; - columns.map((item) => { - if (item.columnName === columnName) { - item.width = width; - } - newColumns.push(item); - }); + onDragResizedCb = (columns: ColumnProps[]) => { this.setState( { - columns: newColumns, - }, - () => { - this.grid1 && this.grid1.recomputeGridSize(); - this.grid2 && this.grid2.recomputeGridSize(); - this.grid3 && this.grid3.recomputeGridSize(); - this.grid4 && this.grid4.recomputeGridSize(); - this.grid5 && this.grid5.recomputeGridSize(); - this.grid6 && this.grid6.recomputeGridSize(); + columns, }, + this.recomputeGridSize, ); }; // 拖拽自定义固定列前置动作 @@ -183,15 +176,12 @@ export default class AirTable extends Component { } }; // 拖拽自定义固定列后置动作 - onResizeStopLeftDragFixed = ({ columns }) => { + onResizeStopLeftDragFixed = (columns: ColumnProps[]) => { this.setState( { columns, }, - () => { - this.grid1 && this.grid1.recomputeGridSize(); - this.grid2 && this.grid2.recomputeGridSize(); - }, + this.recomputeGridSize, ); }; // 拖拽自定义固定列前置动作 @@ -204,19 +194,16 @@ export default class AirTable extends Component { } }; // 拖拽自定义固定列后置动作 - onResizeStopRightDragFixed = ({ columns }) => { + onResizeStopRightDragFixed = (columns: ColumnProps[]) => { this.setState( { columns, }, - () => { - this.grid5 && this.grid5.recomputeGridSize(); - this.grid6 && this.grid6.recomputeGridSize(); - }, + this.recomputeGridSize, ); }; // 拖拽滚动表格 - onScrollHor = (direction: string, step: number) => { + onDragSortedMove = (direction: string, step: number) => { // 拖动超过视图范围，将表格左右滚动 if (this.grid4) { if (direction === 'right') { @@ -233,49 +220,13 @@ export default class AirTable extends Component { } }; // 拖拽排序回调 - onDragSorted = (dragColumn: any, dropColumn: any) => { - const { onDragSorted } = this.props; - const { columns } = this.state; - const newColumns: any[] = []; - columns.map((item) => { - if (dragColumn.orderNo > dropColumn.orderNo) { - if (item.orderNo >= dropColumn.orderNo && item.orderNo <= dragColumn.orderNo) { - if (item.columnName === dragColumn.columnName) { - newColumns.push({ - ...item, - orderNo: dropColumn.orderNo, - }); - } else { - newColumns.push({ - ...item, - orderNo: item.orderNo + 1, - }); - } - } else { - newColumns.push(item); - } - } else { - if (item.columnName === dragColumn.columnName) { - newColumns.push({ - ...item, - orderNo: dropColumn.orderNo - 1, - }); - } else if (item.orderNo >= dragColumn.orderNo && item.orderNo <= dropColumn.orderNo) { - newColumns.push({ - ...item, - orderNo: item.orderNo - 1, - }); - } else { - newColumns.push(item); - } - } - }); - newColumns.sort((a, b) => { - return a.orderNo - b.orderNo; - }); - if (typeof onDragSorted === 'function') { - onDragSorted(newColumns); - } + onDragSortedCb = (columns: ColumnProps[]) => { + this.setState( + { + columns, + }, + this.recomputeGridSize, + ); }; // 渲染表头 renderHeaderCell = ( @@ -283,7 +234,20 @@ export default class AirTable extends Component { { columnIndex, key, style }: any, ) => { if (showColumns.length === 0) return null; - const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted, tableId, cachedFeAttr } = this.props; + const { + sortConfig, + showIndex, + rowSelection, + dataSource, + canResized, + onDragResized, + canSorted, + onDragSorted, + tableId, + cachedFeAttr, + } = this.props; + const { columns } = this.state; + const formatColumns = this.memoizeFormatColumns(columns, cachedFeAttr, tableId); const { columnType = 1, columnName, @@ -301,17 +265,22 @@ export default class AirTable extends Component { columnName={columnName} style={style} tableId={tableId} + canResized={canResized} + onDragResized={onDragResized} cachedFeAttr={cachedFeAttr} - onResizeCb={this.onResizeCb} + onDragResizedCb={this.onDragResizedCb} + columns={formatColumns} > { }; render() { - const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr } = this.props; + const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr, onDragFixed } = this.props; const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state; const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config; const scrollbarWidth = scrollbarSize() || 0; @@ -567,6 +536,7 @@ export default class AirTable extends Component { columns={columns} onResizeStart={this.onResizeStartLeftDragFixed} onResizeStop={this.onResizeStopLeftDragFixed} + onDragFixed={onDragFixed} cachedFeAttr={cachedFeAttr} /> )} @@ -672,6 +642,7 @@ export default class AirTable extends Component { paddingRight={paddingRight} onResizeStart={this.onResizeStartRightDragFixed} onResizeStop={this.onResizeStopRightDragFixed} + onDragFixed={onDragFixed} cachedFeAttr={cachedFeAttr} /> )} diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index dafe5ca..cc61da9 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -82,9 +82,11 @@ class AirTable extends React.Component { contentMenu, onScroll, loadComp, - showCondition, + canResized, + onDragResized, canFixed, - id, + onDragFixed, + canSorted, onDragSorted, onEmitMsg, tableId, @@ -98,16 +100,13 @@ class AirTable extends React.Component { return (
- {operateConfig && ( - - )} + {operateConfig && }
{ )}
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index 64a4025..4b76985 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -1,86 +1,89 @@ -import React from 'react'; - // 列配置 export interface ColumnProps { - columnType: string; - columnChsName: string; - columnName: string; - width?: number; - columnAttrObj?: any; - sortFlag?: boolean; - sortConfig?: any; - isMobile?: boolean; - columnIndex?: number; - showIndex?: boolean; - questionText?: string; + columnType: string; // 组件类型 + columnChsName: string; // 列名 + columnName: string; // 列key + width?: number; // 列宽度 + columnAttrObj?: any; // 组件属性 + sortFlag?: boolean; // 是否可排序 + sortConfig?: any; // 排序配置（当前已有排序及排序功能） + columnIndex?: number; // 列下标 + showIndex?: boolean; // 是否前面添加序号 + questionText?: string; // 后面添加问号解释名称 [propName: string]: any; } // 单元格基本数据格式 export interface CellDataProps { - text: string; - value: any; - extraData?: any; - readonlyFlag?: boolean; + text: string; // 文本 + value: any; // 值 + extraData?: any; // 额外数据 + readonlyFlag?: boolean; // 单元格只读 } // 行数据格式 export interface RowDataProps { - colChsName: string; - colName: string; - cellValueList: CellDataProps[]; - dynamicCellConfigDTO?: any; - linkObjRowDateList?: any; + colChsName: string; // 列名 + colName: string; // 列key + cellValueList: CellDataProps[]; // 单元格数据 + dynamicCellConfigDTO?: any; // 单元格动态配置 + linkObjRowDateList?: any; // 关联数据 } // 行记录格式 export interface RowProps { - id: number; - rowData: RowDataProps[]; + id: number; // 行id（唯一索引） + rowData: RowDataProps[]; // 行数据 [propName: string]: any; } export interface OperateConfigProps { - menusGroup?: Object[]; - buttonsGroup?: Object[]; - moreGroup?: Object[]; - renderCustomNode?: Function; + menusGroup?: Object[]; // 菜单栏（隐藏、筛选、分组、排序四大功能） + buttonsGroup?: Object[]; // 自定义按钮组 + moreGroup?: Object[]; // 按钮太多时可按更多分组 + renderCustomNode?: Function; // 自定义渲染节点 + showCondition?:boolean; // 是否展示筛选条件 } export interface LoadConfigProps { - onScroll?: Function; - distanceToLoad?: number; + onScroll?: Function; // 滚动加载功能 + distanceToLoad?: number; // 触发滚动距离 } export interface TableProps extends LoadConfigProps { + // 表格必须属性 tableId: string | number; // 表格唯一id columns: ColumnProps[]; // 列配置 dataSource: RowProps[]; // 数据源 + // 样式 rowClassName?: string | Function; // 行class rowStyle?: Object | Function; // 行style - rowRenderer?: Function; bordered?: boolean; // 是否显示边框 height?: number; // 表格高度 width?: number; // 表格宽度 - emitChangeCell?: Function; // 单元格修改回调 - sortConfig?: any; - paginationConfig?: any; // 分页配置 - showIndex?: boolean; // 是否显示序号 - showExpand?: any; // 是否显示展开详情图标 - emptyPlaceholder?: string; // 数据为空时默认显示 - cellEditable?: boolean; // 单元格是否可编辑 rowHeight?: number; // 初始化行高 headerHeight?: number; // 初始化表头高度 columnWidth?: number; // 初始化单元格宽度 - loading?: boolean; // 是否加载中 + rowRenderer?: Function; // 自定义渲染行（未实现） + // 第一单元格功能 + showIndex?: boolean; // 是否显示序号 + showExpand?: any; // 是否显示展开详情图标 rowSelection?: any; // 复选配置 - noDataPlaceholder?: any; // 无数据时显示文案 + // 琐碎功能 + cellEditable?: boolean; // 单元格是否可编辑 + emitChangeCell?: Function; // 单元格修改回调 + sortConfig?: any; // 表头快捷排序（正倒序） + paginationConfig?: any; // 分页配置（与onScroll互斥） + noDataPlaceholder?: any; // 表格无数据时显示文案 + emptyPlaceholder?: string; // 单元格数据为空时默认显示 contentMenu?: any; // 右键菜单 - loadComp?: any; // 加载动画组件 + loading?: boolean; // 是否加载中 + loadComp?: any; // 自定义加载动画组件 canFixed?: boolean; // 是否可以拖拽自定义固定列 canSorted?: boolean; // 是否可以拖拽自定义列排序 canResized?: boolean; // 是否可以拖拽自定义列伸缩 onDragSorted?: Function; // 拖拽更改列排序回调 - onDragFixed?: Function; // 拖拽更改列排序回调 - onEmitMsg?: Function;// 是否支持消息协同 - cachedFeAttr?:boolean;// 是否启用前端缓存 + onDragFixed?: Function; // 拖拽更改列固定回调 + onDragResized?: Function; // 拖拽更改列伸缩回调 + onEmitMsg?: Function; // 是否支持消息协同 + cachedFeAttr?: boolean; // 是否启用前端缓存 } export interface TableState { columns: ColumnProps[]; @@ -89,15 +92,11 @@ export interface TableState { tableWidth?: number; } export interface CommonProps extends TableProps { - operateConfig?: OperateConfigProps; - tableOperateConfig?: OperateConfigProps; - paginationConfig?: any; - locale?: any; - className?: string; - tableClassName?: string; - showCondition?: boolean; - id?: string; - onEmitMsg?: Function; + operateConfig?: OperateConfigProps; // 操作栏 + tableOperateConfig?: OperateConfigProps; // 表格顶部操作栏 + locale?: any; // 语言 + className?: string; // 整体wrap样式 + tableClassName?: string; // 表格wrap样式 } export interface CommonState extends TableState {} diff --git a/components/apolloTable/component/operate/index.tsx b/components/apolloTable/component/operate/index.tsx index 03c3024..3a100d7 100644 --- a/components/apolloTable/component/operate/index.tsx +++ b/components/apolloTable/component/operate/index.tsx @@ -12,7 +12,6 @@ import { OperateConfigProps, ColumnProps } from '../interface'; interface Props { operateConfig?: OperateConfigProps; columns: ColumnProps[]; - showCondition?: boolean; } /** * 操作栏 @@ -48,12 +47,11 @@ export default class Operate extends Component { }; render() { - const { operateConfig, columns, showCondition } = this.props; - const { menusGroup, buttonsGroup, renderCustomNode }: any = operateConfig || {}; + const { operateConfig, columns } = this.props; + const { menusGroup, buttonsGroup, renderCustomNode, showCondition }: any = operateConfig || {}; - const filter: any = - menusGroup && - menusGroup.find((item: any) => { + const filter: any = menusGroup + && menusGroup.find((item: any) => { return item.type === 'filter'; }); return ( diff --git a/components/apolloTable/editForm/index.tsx b/components/apolloTable/editForm/index.tsx index 17edd72..8555c8c 100644 --- a/components/apolloTable/editForm/index.tsx +++ b/components/apolloTable/editForm/index.tsx @@ -46,9 +46,6 @@ const EditForm = (props: any) => { ...(columnAttrObj || {}), }; const transferColumn = transferAttr(columnType, newProps); - // if(item.columnName==='emails'){ - // debugger - // } return ( { } else { detailConfig = config[String(columnType)] || config['1']; } - // if(key==='contactList'){ - // debugger - // } const cellValueList = setFormat(detailConfig, item, values[key], value); newValues.push({ columnCode: key, diff --git a/components/apolloTable/utils/memCols.ts b/components/apolloTable/utils/memCols.ts index dc3f232..bdb3279 100644 --- a/components/apolloTable/utils/memCols.ts +++ b/components/apolloTable/utils/memCols.ts @@ -69,9 +69,6 @@ export const getLeftWidth = ( // 格式化列数据（添加缓存的前端属性） 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) { @@ -93,8 +90,13 @@ export const getFormatColumns = (columns: ColumnProps[], cachedFeAttr: boolean, orderNo: item.orderNo, }; }); - saveCache({ tableId, data }); + if (columns.length > 0) { + saveCache({ tableId, data }); + } } } + columns.sort((a, b) => { + return a.orderNo - b.orderNo; + }); return columns; }; -- 2.21.0