vxe-table 3.12.8 → 3.12.10-beta.0

package/es/table/src/props.js

@@ -214,11 +214,17 @@ export default {
     // 空内容渲染配置项
     emptyRender: [Boolean, Object],
     // 自定义列配置项
-    customConfig: [Boolean, Object],
-    // 横向虚拟滚动配置项
+    customConfig: Object,
+    // （即将废弃）横向虚拟滚动配置项
     scrollX: Object,
-    // 纵向虚拟滚动配置项
+    // （即将废弃）纵向虚拟滚动配置项
     scrollY: Object,
+    // 横向虚拟滚动配置项
+    virtualXConfig: Object,
+    // 纵向虚拟滚动配置项
+    virtualYConfig: Object,
+    // 滚动条配置项
+    scrollbarConfig: Object,
     // （即将废弃）优化相关
     animat: { type: Boolean, default: () => getConfig().table.animat },
     // （可能会被废弃的参数，不要使用）

package/es/table/src/table.js

@@ -32,10 +32,11 @@ const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globa
  */
 function renderFixed(h, $xetable, fixedType) {
     const { _e, tableData, tableColumn, tableGroupColumn, vSize, showHeader, showFooter, columnStore, footerTableData } = $xetable;
+    const isFixedLeft = fixedType === 'left';
     const fixedColumn = columnStore[`${fixedType}List`];
     return h('div', {
-        class: `vxe-table--fixed-${fixedType}-wrapper`,
-        ref: `${fixedType}Container`
+        ref: isFixedLeft ? 'refLeftContainer' : 'refRightContainer',
+        class: `vxe-table--fixed-${fixedType}-wrapper`
     }, [
         showHeader
             ? h(TableHeaderComponent, {
@@ -202,7 +203,9 @@ export default {
         }
     },
     data() {
+        const xID = XEUtils.uniqueId();
         return {
+            xID,
             tId: `${XEUtils.uniqueId()}`,
             isCalcColumn: false,
             // 低性能的静态列
@@ -423,7 +426,7 @@ export default {
             dragCol: null,
             dragTipText: '',
             _isResize: false,
-            _isLoading: false
+            isLoading: false
         };
     },
     computed: Object.assign(Object.assign({}, {}), { tableId() {
@@ -449,7 +452,7 @@ export default {
             return this.computeSXOpts;
         },
         computeSXOpts() {
-            return Object.assign({}, getConfig().table.scrollX, this.scrollX);
+            return this.computeVirtualXOpts;
         },
         computeScrollXThreshold() {
             const $xeTable = this;
@@ -464,7 +467,22 @@ export default {
             return this.computeSYOpts;
         },
         computeSYOpts() {
-            return Object.assign({}, getConfig().table.scrollY, this.scrollY);
+            return this.computeVirtualYOpts;
+        },
+        computeVirtualXOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.scrollX, getConfig().table.virtualXConfig, props.scrollX, props.virtualXConfig);
+        },
+        computeVirtualYOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.scrollY, getConfig().table.virtualYConfig, props.scrollY, props.virtualYConfig);
+        },
+        computeScrollbarOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         },
         computeScrollYThreshold() {
             const $xeTable = this;
@@ -486,6 +504,12 @@ export default {
                 mini: 36
             };
         },
+        computeDefaultRowHeight() {
+            const $xeTable = this;
+            const vSize = $xeTable.computeSize;
+            const rowHeightMaps = $xeTable.computeRowHeightMaps;
+            return rowHeightMaps[vSize || 'default'];
+        },
         columnOpts() {
             return this.computeColumnOpts;
         },
@@ -627,6 +651,30 @@ export default {
         computeMenuOpts() {
             return Object.assign({}, getConfig().table.menuConfig, this.contextMenu, this.menuConfig);
         },
+        computeLeftFixedWidth() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { columnStore } = reactData;
+            const { leftList } = columnStore;
+            let leftWidth = 0;
+            for (let i = 0; i < leftList.length; i++) {
+                const column = leftList[i];
+                leftWidth += column.renderWidth;
+            }
+            return leftWidth;
+        },
+        computeRightFixedWidth() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { columnStore } = reactData;
+            const { rightList } = columnStore;
+            let leftWidth = 0;
+            for (let i = 0; i < rightList.length; i++) {
+                const column = rightList[i];
+                leftWidth += column.renderWidth;
+            }
+            return leftWidth;
+        },
         exportOpts() {
             return this.computeExportOpts;
         },
@@ -669,7 +717,7 @@ export default {
         computeLoadingOpts() {
             return Object.assign({}, getConfig().table.loadingConfig, this.loadingConfig);
         },
-        cellOffsetWidth() {
+        computeCellOffsetWidth() {
             return this.border ? Math.max(2, Math.ceil(this.scrollbarWidth / this.tableColumn.length)) : 1;
         },
         customOpts() {
@@ -842,16 +890,21 @@ export default {
             elemStore: {},
             // 存放横向 X 虚拟滚动相关的信息
             scrollXStore: {
+                preloadSize: 0,
                 offsetSize: 0,
                 visibleSize: 0,
+                visibleStartIndex: 0,
+                visibleEndIndex: 0,
                 startIndex: 0,
                 endIndex: 0
             },
             // 存放纵向 Y 虚拟滚动相关信息
             scrollYStore: {
-                rowHeight: 0,
+                preloadSize: 0,
                 offsetSize: 0,
                 visibleSize: 0,
+                visibleStartIndex: 0,
+                visibleEndIndex: 0,
                 startIndex: 0,
                 endIndex: 0
             },
@@ -893,7 +946,10 @@ export default {
             fullDataRowIdData: {},
             fullColumnMap: new Map(),
             fullColumnIdData: {},
-            fullColumnFieldData: {}
+            fullColumnFieldData: {},
+            swYSize: 0,
+            swYInterval: 0,
+            swYTotal: 0
         });
         if (process.env.NODE_ENV === 'development') {
             if (this.rowId) {
@@ -1163,18 +1219,34 @@ export default {
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const $xeTable = this;
         const $xeGrid = $xeTable.$xeGrid;
-        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, treeOpts, treeConfig, mouseConfig, mouseOpts, areaOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, resizableOpts, editRules } = $xeTable;
+        const props = $xeTable;
+        const slots = $xeTable.$scopedSlots;
+        const reactData = $xeTable;
+        const { xID } = $xeTable;
+        const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
+        const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData;
         const { leftList, rightList } = columnStore;
-        const loadingSlot = $scopedSlots.loading;
-        const currLoading = this._isLoading || loading;
-        const vSize = computeSize;
+        const loadingSlot = slots.loading;
+        const tooltipOpts = $xeTable.computeTooltipOpts;
+        const validOpts = $xeTable.computeValidOpts;
+        const checkboxOpts = $xeTable.computeCheckboxOpts;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const rowOpts = $xeTable.computeRowOpts;
+        const columnOpts = $xeTable.computeColumnOpts;
+        const vSize = $xeTable.computeSize;
         const tableBorder = $xeTable.computeTableBorder;
-        const virtualScrollBars = $xeTable.computeVirtualScrollBars;
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const areaOpts = $xeTable.computeAreaOpts;
+        const loadingOpts = $xeTable.computeLoadingOpts;
+        const isMenu = $xeTable.computeIsMenu;
+        const currLoading = reactData.isLoading || loading;
+        const resizableOpts = $xeTable.computeResizableOpts;
         const isArea = mouseConfig && mouseOpts.area;
         const columnDragOpts = $xeTable.computeColumnDragOpts;
         return h('div', {
             ref: 'refElem',
-            class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
+            class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+                    [`size--${vSize}`]: vSize,
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                     'vxe-editable': !!editConfig,
                     'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete',
@@ -1194,9 +1266,9 @@ export default {
                     'is--tree-line': treeConfig && (treeOpts.showLine || treeOpts.line),
                     'is--fixed-left': leftList.length,
                     'is--fixed-right': rightList.length,
-                    'is--animat': !!this.animat,
-                    'is--padding': this.padding,
-                    'is--round': this.round,
+                    'is--animat': !!props.animat,
+                    'is--padding': props.padding,
+                    'is--round': props.round,
                     'is--stripe': !treeConfig && stripe,
                     'is--loading': currLoading,
                     'is--empty': !currLoading && !tableData.length,
@@ -1224,100 +1296,112 @@ export default {
                 class: 'vxe-table--render-wrapper'
             }, [
                 h('div', {
-                    class: 'vxe-table--main-wrapper'
+                    ref: 'refTableViewportElem',
+                    class: 'vxe-table--viewport-wrapper'
                 }, [
-                    /**
-                     * 表头
-                     */
-                    showHeader
-                        ? h(TableHeaderComponent, {
-                            ref: 'tableHeader',
+                    h('div', {
+                        class: 'vxe-table--main-wrapper'
+                    }, [
+                        /**
+                         * 表头
+                         */
+                        showHeader
+                            ? h(TableHeaderComponent, {
+                                ref: 'refTableHeader',
+                                props: {
+                                    tableData,
+                                    tableColumn,
+                                    tableGroupColumn,
+                                    size: vSize
+                                }
+                            })
+                            : renderEmptyElement($xeTable),
+                        /**
+                       * 表体
+                       */
+                        h(TableBodyComponent, {
+                            ref: 'refTableBody',
                             props: {
                                 tableData,
                                 tableColumn,
-                                tableGroupColumn,
                                 size: vSize
                             }
-                        })
-                        : _e(),
-                    /**
-                     * 表体
-                     */
-                    h(TableBodyComponent, {
-                        ref: 'tableBody',
-                        props: {
-                            tableData,
-                            tableColumn,
-                            size: vSize
-                        }
-                    }),
-                    /**
-                     * 表尾
-                     */
-                    showFooter
-                        ? h(TableFooterComponent, {
-                            ref: 'tableFooter',
-                            props: {
-                                footerTableData,
-                                tableColumn,
-                                size: vSize
-                            }
-                        })
-                        : _e()
-                ]),
-                h('div', {
-                    class: 'vxe-table--fixed-wrapper'
-                }, [
-                    leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : _e(),
-                    rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : _e()
-                ])
-            ]),
-            virtualScrollBars.x
-                ? h('div', {
-                    key: 'vx',
-                    ref: 'refScrollXVirtualElem',
-                    class: 'vxe-table--scroll-x-virtual'
-                }, [
+                        }),
+                        /**
+                       * 表尾
+                       */
+                        showFooter
+                            ? h(TableFooterComponent, {
+                                ref: 'refTableFooter',
+                                props: {
+                                    footerTableData,
+                                    tableColumn,
+                                    size: vSize
+                                }
+                            })
+                            : renderEmptyElement($xeTable)
+                    ]),
                     h('div', {
-                        ref: 'refScrollXHandleElem',
-                        class: 'vxe-table--scroll-x-handle',
-                        on: {
-                            scroll: $xeTable.scrollXEvent
-                        }
+                        class: 'vxe-table--fixed-wrapper'
                     }, [
-                        h('div', {
-                            ref: 'refScrollXSpaceElem',
-                            class: 'vxe-table--scroll-x-space'
-                        })
+                        leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : renderEmptyElement($xeTable),
+                        rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : renderEmptyElement($xeTable)
                     ])
-                ])
-                : renderEmptyElement($xeTable),
-            virtualScrollBars.y
-                ? h('div', {
-                    key: 'vy',
+                ]),
+                h('div', {
                     ref: 'refScrollYVirtualElem',
                     class: 'vxe-table--scroll-y-virtual'
                 }, [
+                    h('div', {
+                        ref: 'refScrollYTopCornerElem',
+                        class: 'vxe-table--scroll-y-top-corner'
+                    }),
                     h('div', {
                         ref: 'refScrollYHandleElem',
                         class: 'vxe-table--scroll-y-handle',
                         on: {
-                            scroll: $xeTable.scrollYEvent
+                            scroll: this.scrollYEvent
                         }
                     }, [
                         h('div', {
                             ref: 'refScrollYSpaceElem',
                             class: 'vxe-table--scroll-y-space'
                         })
-                    ])
+                    ]),
+                    h('div', {
+                        ref: 'refScrollYBottomCornerElem',
+                        class: 'vxe-table--scroll-y-bottom-corner'
+                    })
                 ])
-                : renderEmptyElement($xeTable),
+            ]),
+            h('div', {
+                key: 'vx',
+                ref: 'refScrollXVirtualElem',
+                class: 'vxe-table--scroll-x-virtual'
+            }, [
+                h('div', {
+                    ref: 'refScrollXHandleElem',
+                    class: 'vxe-table--scroll-x-handle',
+                    on: {
+                        scroll: this.scrollXEvent
+                    }
+                }, [
+                    h('div', {
+                        ref: 'refScrollXSpaceElem',
+                        class: 'vxe-table--scroll-x-space'
+                    })
+                ]),
+                h('div', {
+                    ref: 'refScrollXRightCornerElem',
+                    class: 'vxe-table--scroll-x-right-corner'
+                })
+            ]),
             /**
              * 空数据
              */
             h('div', {
                 key: 'tn',
-                ref: 'emptyPlaceholder',
+                ref: 'refEmptyPlaceholder',
                 class: 'vxe-table--empty-placeholder'
             }, [
                 h('div', {
@@ -1336,19 +1420,19 @@ export default {
              */
             h('div', {
                 key: 'cl',
+                ref: 'refCellResizeBar',
                 class: 'vxe-table--resizable-bar',
                 style: overflowX
                     ? {
                         'padding-bottom': `${scrollbarHeight}px`
                     }
-                    : {},
-                ref: 'resizeBar'
+                    : undefined
             }, resizableOpts.showDragTip
                 ? [
                     h('div', {
                         ref: 'refCellResizeTip',
                         class: 'vxe-table--resizable-number-tip'
-                    }, '23432px')
+                    })
                 ]
                 : []),
             /**
@@ -1399,7 +1483,7 @@ export default {
                         filterStore
                     }
                 })
-                : _e(),
+                : renderEmptyElement($xeTable),
             /**
              * 导入
              */
@@ -1411,7 +1495,7 @@ export default {
                         storeData: this.importStore
                     }
                 })
-                : _e(),
+                : renderEmptyElement($xeTable),
             /**
              * 导出
              */
@@ -1423,20 +1507,20 @@ export default {
                         storeData: this.exportStore
                     }
                 })
-                : _e(),
+                : renderEmptyElement($xeTable),
             /**
-             * 快捷菜单
-             */
-            ctxMenuStore.visible && this.isCtxMenu
+               * 快捷菜单
+               */
+            isMenu
                 ? h(TableMenuPanelComponent, {
                     key: 'tm',
-                    ref: 'ctxWrapper',
+                    ref: 'refTableMenu',
                     props: {
-                        ctxMenuStore,
-                        ctxMenuOpts
+                        ctxMenuStore: this.ctxMenuStore,
+                        ctxMenuOpts: this.ctxMenuOpts
                     }
                 })
-                : _e(),
+                : renderEmptyElement($xeTable),
             /**
              * 拖拽提示
              */
@@ -1448,13 +1532,13 @@ export default {
                 VxeUITooltipComponent
                     ? h(VxeUITooltipComponent, {
                         key: 'ctp',
-                        ref: 'commTip',
+                        ref: 'refCommTooltip',
                         props: {
                             isArrow: false,
                             enterable: false
                         }
                     })
-                    : _e(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 工具提示
                  */
@@ -1462,22 +1546,22 @@ export default {
                     ? h(VxeUITooltipComponent, {
                         key: 'btp',
                         ref: 'tooltip',
-                        props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
+                        props: Object.assign({}, tooltipOpts, tooltipStore.currOpts)
                     })
-                    : _e(),
+                    : renderEmptyElement($xeTable),
                 /**
                  * 校验提示
                  */
                 VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
                     ? h(VxeUITooltipComponent, {
                         key: 'vtp',
-                        ref: 'validTip',
+                        ref: 'refValidTooltip',
                         class: [{
                                 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
                             }, 'vxe-table--valid-error'],
-                        props: validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : null
+                        props: validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({ isArrow: false }, tooltipOpts) : {}
                     })
-                    : _e()
+                    : renderEmptyElement($xeTable)
             ])
         ]);
     },

package/es/table/src/util.js

@@ -61,11 +61,6 @@ export const convertHeaderColumnToRows = (originColumns) => {
     });
     return rows;
 };
-const lineOffsetSizes = {
-    mini: 3,
-    small: 2,
-    medium: 1
-};
 export function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
     const internalData = $xeTable;
     return $xeTable.clearScroll().then(() => {
@@ -73,10 +68,13 @@ export function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
             // 重置最后滚动状态
             internalData.lastScrollLeft = 0;
             internalData.lastScrollTop = 0;
+            internalData.intoRunScroll = false;
             internalData.inVirtualScroll = false;
+            internalData.inWheelScroll = false;
+            internalData.inHeaderScroll = false;
             internalData.inBodyScroll = false;
             internalData.inFooterScroll = false;
-            internalData.bodyScrollType = '';
+            internalData.scrollRenderType = '';
             // 还原滚动状态
             return $xeTable.scrollTo(scrollLeft, scrollTop);
         }
@@ -214,8 +212,8 @@ export function getColReMinWidth(params) {
     }
     // 如果设置最小宽
     if (colMinWidth) {
-        const { tableBody } = $table.$refs;
-        const bodyElem = tableBody ? tableBody.$el : null;
+        const { refTableBody } = $table.$refs;
+        const bodyElem = refTableBody ? refTableBody.$el : null;
         if (bodyElem) {
             if (isScale(colMinWidth)) {
                 const bodyWidth = bodyElem.clientWidth - 1;
@@ -229,15 +227,21 @@ export function getColReMinWidth(params) {
     }
     return mWidth;
 }
+const lineOffsetSizes = {
+    mini: 3,
+    small: 2,
+    medium: 1
+};
 function countTreeExpand(prevRow, params) {
     let count = 1;
     if (!prevRow) {
         return count;
     }
     const { $table } = params;
-    const { treeOpts } = $table;
+    const treeOpts = $table.computeTreeOpts;
+    const { transform, mapChildrenField } = treeOpts;
     const childrenField = treeOpts.children || treeOpts.childrenField;
-    const rowChildren = prevRow[childrenField];
+    const rowChildren = prevRow[transform ? mapChildrenField : childrenField];
     if (rowChildren && $table.isTreeExpandByRow(prevRow)) {
         for (let index = 0; index < rowChildren.length; index++) {
             count += countTreeExpand(rowChildren[index], params);
@@ -245,17 +249,21 @@ function countTreeExpand(prevRow, params) {
     }
     return count;
 }
-export function getOffsetSize($xetable) {
-    const vSize = $xetable.computeSize;
-    return lineOffsetSizes[vSize] || 0;
+export function getOffsetSize($xeTable) {
+    const vSize = $xeTable.computeSize;
+    if (vSize) {
+        return lineOffsetSizes[vSize] || 0;
+    }
+    return 0;
 }
-export function calcTreeLine(params, items, rIndex) {
+export function calcTreeLine(params, prevRow) {
     const { $table } = params;
+    const tableReactData = $table;
     let expandSize = 1;
-    if (rIndex) {
-        expandSize = countTreeExpand(items[rIndex - 1], params);
+    if (prevRow) {
+        expandSize = countTreeExpand(prevRow, params);
     }
-    return $table.rowHeight * expandSize - (rIndex ? 1 : (12 - getOffsetSize($table)));
+    return tableReactData.rowHeight * expandSize - (prevRow ? 1 : (12 - getOffsetSize($table)));
 }
 export function mergeBodyMethod(mergeList, _rowIndex, _columnIndex) {
     for (let mIndex = 0; mIndex < mergeList.length; mIndex++) {
@@ -276,6 +284,12 @@ export function getCellValue(row, column) {
 export function setCellValue(row, column, value) {
     return XEUtils.set(row, column.field, value);
 }
+export function getRefElem(refEl) {
+    if (refEl) {
+        return (refEl.$el || refEl);
+    }
+    return null;
+}
 export function clearTableDefaultStatus(_vm) {
     _vm.initStatus = false;
     _vm.clearSort();
@@ -317,12 +331,12 @@ export function rowToVisible($xeTable, row) {
     const internalData = $xeTable;
     const tableProps = $xeTable;
     const { showOverflow } = tableProps;
-    const tableBody = $xeTable.$refs.tableBody;
+    const refTableBody = $xeTable.$refs.refTableBody;
     const { columnStore, scrollYLoad } = reactData;
     const { afterFullData, scrollYStore, fullAllDataRowIdData } = internalData;
     const { rowHeight } = scrollYStore;
     const { leftList, rightList } = columnStore;
-    const bodyElem = tableBody ? tableBody.$el : null;
+    const bodyElem = refTableBody ? refTableBody.$el : null;
     const rowid = getRowid($xeTable, row);
     let offsetFixedLeft = 0;
     leftList.forEach((item) => {
@@ -377,9 +391,9 @@ export function rowToVisible($xeTable, row) {
 }
 export function colToVisible($xeTable, column, row) {
     const { columnStore, scrollXLoad, visibleColumn } = $xeTable;
-    const tableBody = $xeTable.$refs.tableBody;
+    const refTableBody = $xeTable.$refs.refTableBody;
     const { leftList, rightList } = columnStore;
-    const bodyElem = tableBody ? tableBody.$el : null;
+    const bodyElem = refTableBody ? refTableBody.$el : null;
     if (column.fixed) {
         return Promise.resolve();
     }