vxe-table 3.12.10-beta.2 → 3.12.10-beta.21

package/es/table/src/props.js

@@ -29,10 +29,10 @@ export default {
         type: [Boolean, String],
         default: () => getConfig().table.border
     },
-    // 单元格是否有边距
+    // 已废弃，被 cell-config.padding 替换
     padding: {
         type: Boolean,
-        default: () => getConfig().table.padding
+        default: null
     },
     // 是否圆角边框
     round: {
@@ -157,6 +157,10 @@ export default {
     columnConfig: Object,
     // 单元格配置信息
     cellConfig: Object,
+    // 表头单元格配置信息
+    headerCellConfig: Object,
+    // 表尾单元格配置信息
+    footerCellConfig: Object,
     // 行配置信息
     rowConfig: Object,
     // 已废弃，被 rowDragConfig 替换

package/es/table/src/table.js

@@ -165,12 +165,148 @@ const renderDragTip = (h, $xeTable) => {
     }
     return renderEmptyElement($xeTable);
 };
-function handleUupdateResize(_vm) {
+function handleUpdateResize(_vm) {
     const { $el } = _vm;
     if ($el && $el.clientWidth && $el.clientHeight) {
         _vm.recalculate();
     }
 }
+function renderScrollX(h, $xeTable) {
+    return h('div', {
+        key: 'vsx',
+        ref: 'refScrollXVirtualElem',
+        class: 'vxe-table--scroll-x-virtual'
+    }, [
+        h('div', {
+            ref: 'refScrollXLeftCornerElem',
+            class: 'vxe-table--scroll-x-left-corner'
+        }),
+        h('div', {
+            ref: 'refScrollXWrapperElem',
+            class: 'vxe-table--scroll-x-wrapper'
+        }, [
+            h('div', {
+                ref: 'refScrollXHandleElem',
+                class: 'vxe-table--scroll-x-handle',
+                on: {
+                    scroll: $xeTable.triggerVirtualScrollXEvent
+                }
+            }, [
+                h('div', {
+                    ref: 'refScrollXSpaceElem',
+                    class: 'vxe-table--scroll-x-space'
+                })
+            ])
+        ]),
+        h('div', {
+            ref: 'refScrollXRightCornerElem',
+            class: 'vxe-table--scroll-x-right-corner'
+        })
+    ]);
+}
+function renderScrollY(h, $xeTable) {
+    return h('div', {
+        ref: 'refScrollYVirtualElem',
+        class: 'vxe-table--scroll-y-virtual'
+    }, [
+        h('div', {
+            ref: 'refScrollYTopCornerElem',
+            class: 'vxe-table--scroll-y-top-corner'
+        }),
+        h('div', {
+            ref: 'refScrollYWrapperElem',
+            class: 'vxe-table--scroll-y-wrapper'
+        }, [
+            h('div', {
+                ref: 'refScrollYHandleElem',
+                class: 'vxe-table--scroll-y-handle',
+                on: {
+                    scroll: $xeTable.triggerVirtualScrollYEvent
+                }
+            }, [
+                h('div', {
+                    ref: 'refScrollYSpaceElem',
+                    class: 'vxe-table--scroll-y-space'
+                })
+            ])
+        ]),
+        h('div', {
+            ref: 'refScrollYBottomCornerElem',
+            class: 'vxe-table--scroll-y-bottom-corner'
+        })
+    ]);
+}
+function renderViewport(h, $xeTable) {
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const { showHeader, showFooter } = props;
+    const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
+    const { leftList, rightList } = columnStore;
+    return h('div', {
+        ref: 'refTableViewportElem',
+        class: 'vxe-table--viewport-wrapper'
+    }, [
+        h('div', {
+            class: 'vxe-table--main-wrapper'
+        }, [
+            /**
+               * 表头
+               */
+            showHeader
+                ? h(TableHeaderComponent, {
+                    ref: 'refTableHeader',
+                    props: {
+                        tableData,
+                        tableColumn,
+                        tableGroupColumn
+                    }
+                })
+                : renderEmptyElement($xeTable),
+            /**
+               * 表体
+               */
+            h(TableBodyComponent, {
+                ref: 'refTableBody',
+                props: {
+                    tableData,
+                    tableColumn
+                }
+            }),
+            /**
+               * 表尾
+               */
+            showFooter
+                ? h(TableFooterComponent, {
+                    ref: 'refTableFooter',
+                    props: {
+                        footerTableData,
+                        tableColumn
+                    }
+                })
+                : renderEmptyElement($xeTable)
+        ]),
+        h('div', {
+            class: 'vxe-table--fixed-wrapper'
+        }, [
+            leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : renderEmptyElement($xeTable),
+            rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : renderEmptyElement($xeTable)
+        ])
+    ]);
+}
+function renderBody(h, $xeTable) {
+    const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
+    return h('div', {
+        class: 'vxe-table--layout-wrapper'
+    }, scrollbarYToLeft
+        ? [
+            renderScrollY(h, $xeTable),
+            renderViewport(h, $xeTable)
+        ]
+        : [
+            renderViewport(h, $xeTable),
+            renderScrollY(h, $xeTable)
+        ]);
+}
 export default {
     name: 'VxeTable',
     mixins: [
@@ -206,8 +342,7 @@ export default {
         const xID = XEUtils.uniqueId();
         return {
             xID,
-            tId: `${XEUtils.uniqueId()}`,
-            isCalcColumn: false,
+            tId: xID,
             // 低性能的静态列
             staticColumns: [],
             // 渲染的列分组
@@ -418,15 +553,19 @@ export default {
                 isFooter: false
             },
             scrollVMLoading: false,
-            isCalcCellHeight: 0,
+            calcCellHeightFlag: 0,
+            resizeHeightFlag: 0,
             isCustomStatus: false,
             isDragRowMove: false,
             dragRow: null,
             isDragColMove: false,
             dragCol: null,
             dragTipText: '',
-            _isResize: false,
-            isLoading: false
+            isDragResize: false,
+            isLoading: false,
+            reScrollFlag: 0,
+            reLayoutFlag: 0,
+            footFlag: 0
         };
     },
     computed: Object.assign(Object.assign({}, {}), { tableId() {
@@ -484,6 +623,16 @@ export default {
             const props = $xeTable;
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         },
+        computeScrollbarXToTop() {
+            const $xeTable = this;
+            const scrollbarOpts = $xeTable.computeScrollbarOpts;
+            return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+        },
+        computeScrollbarYToLeft() {
+            const $xeTable = this;
+            const scrollbarOpts = $xeTable.computeScrollbarOpts;
+            return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+        },
         computeScrollYThreshold() {
             const $xeTable = this;
             const sYOpts = $xeTable.computeSYOpts;
@@ -508,7 +657,7 @@ export default {
             const $xeTable = this;
             const vSize = $xeTable.computeSize;
             const rowHeightMaps = $xeTable.computeRowHeightMaps;
-            return rowHeightMaps[vSize || 'default'];
+            return rowHeightMaps[vSize || 'default'] || 18;
         },
         columnOpts() {
             return this.computeColumnOpts;
@@ -517,7 +666,19 @@ export default {
             return Object.assign({}, getConfig().table.columnConfig, this.columnConfig);
         },
         computeCellOpts() {
-            return Object.assign({}, getConfig().table.cellConfig, this.cellConfig);
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.cellConfig, props.cellConfig);
+        },
+        computeHeaderCellOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
+        },
+        computeFooterCellOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
         },
         rowOpts() {
             return this.computeRowOpts;
@@ -570,6 +731,18 @@ export default {
         tipConfig() {
             return Object.assign({}, this.tooltipOpts);
         },
+        computeTableTipConfig() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { tooltipStore } = reactData;
+            const tooltipOpts = $xeTable.computeTooltipOpts;
+            return Object.assign({}, tooltipOpts, tooltipStore.currOpts);
+        },
+        computeValidTipConfig() {
+            const $xeTable = this;
+            const tooltipOpts = $xeTable.computeTooltipOpts;
+            return Object.assign({}, tooltipOpts);
+        },
         validTipOpts() {
             return Object.assign({ isArrow: false }, this.tooltipOpts);
         },
@@ -622,24 +795,54 @@ export default {
             return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig);
         },
         headerCtxMenu() {
-            const headerOpts = this.ctxMenuOpts.header;
+            return this.computeHeaderMenu;
+        },
+        computeHeaderMenu() {
+            const $xeTable = this;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const headerOpts = menuOpts.header;
             return headerOpts && headerOpts.options ? headerOpts.options : [];
         },
         bodyCtxMenu() {
-            const bodyOpts = this.ctxMenuOpts.body;
+            return this.computeBodyMenu;
+        },
+        computeBodyMenu() {
+            const $xeTable = this;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const bodyOpts = menuOpts.body;
             return bodyOpts && bodyOpts.options ? bodyOpts.options : [];
         },
         footerCtxMenu() {
-            const footerOpts = this.ctxMenuOpts.footer;
+            return this.computeFooterMenu;
+        },
+        computeFooterMenu() {
+            const $xeTable = this;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const footerOpts = menuOpts.footer;
             return footerOpts && footerOpts.options ? footerOpts.options : [];
         },
         isCtxMenu() {
-            return !!((this.contextMenu || this.menuConfig) && isEnableConf(this.ctxMenuOpts) && (this.headerCtxMenu.length || this.bodyCtxMenu.length || this.footerCtxMenu.length));
+            return this.computeIsMenu;
+        },
+        computeIsMenu() {
+            const $xeTable = this;
+            const props = $xeTable;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const headerMenu = $xeTable.computeHeaderMenu;
+            const bodyMenu = $xeTable.computeBodyMenu;
+            const footerMenu = $xeTable.computeFooterMenu;
+            return !!((props.contextMenu || props.menuConfig) && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length));
         },
         ctxMenuList() {
+            return this.computeMenuList;
+        },
+        computeMenuList() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { ctxMenuStore } = reactData;
             const rest = [];
-            this.ctxMenuStore.list.forEach((list) => {
-                list.forEach(item => {
+            ctxMenuStore.list.forEach((list) => {
+                list.forEach((item) => {
                     rest.push(item);
                 });
             });
@@ -814,7 +1017,7 @@ export default {
             if (value && value.length >= 50000) {
                 warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)']);
             }
-            this.loadTableData(value || []).then(() => {
+            this.loadTableData(value || [], false).then(() => {
                 this.inited = true;
                 this.initStatus = true;
                 if (!initStatus) {
@@ -842,33 +1045,50 @@ export default {
         reColumnFlag() {
             this.$nextTick().then(() => this.refreshColumn());
         },
+        computeSize() {
+            this.reScrollFlag++;
+        },
         showHeader() {
-            this.$nextTick(() => {
-                this.recalculate(true).then(() => this.refreshScroll());
-            });
+            this.reScrollFlag++;
         },
         showFooter() {
-            this.$nextTick(() => {
-                this.recalculate(true).then(() => this.refreshScroll());
+            this.reScrollFlag++;
+        },
+        reScrollFlag() {
+            const $xeTable = this;
+            $xeTable.$nextTick(() => {
+                $xeTable.recalculate(true).then(() => $xeTable.refreshScroll());
             });
         },
         height() {
-            this.$nextTick(() => this.recalculate(true));
+            this.reLayoutFlag++;
         },
         maxHeight() {
-            this.$nextTick(() => this.recalculate(true));
+            this.reLayoutFlag++;
         },
-        computeSize() {
-            this.$nextTick(() => {
-                this.recalculate(true).then(() => this.refreshScroll());
-            });
+        computeScrollbarXToTop() {
+            this.reLayoutFlag++;
+        },
+        computeScrollbarYToLeft() {
+            this.reLayoutFlag++;
+        },
+        reLayoutFlag() {
+            const $xeTable = this;
+            $xeTable.$nextTick(() => $xeTable.recalculate(true));
+        },
+        footerData() {
+            this.footFlag++;
+        },
+        footFlag() {
+            const $xeTable = this;
+            $xeTable.updateFooter();
         },
         syncResize(value) {
             if (value) {
-                handleUupdateResize(this);
+                handleUpdateResize(this);
                 this.$nextTick(() => {
-                    handleUupdateResize(this);
-                    setTimeout(() => handleUupdateResize(this));
+                    handleUpdateResize(this);
+                    setTimeout(() => handleUpdateResize(this));
                 });
             }
         },
@@ -970,11 +1190,14 @@ export default {
             if (treeConfig && (treeOpts.showLine || treeOpts.line) && (!(this.rowKey || rowOpts.useKey) || !showOverflow)) {
                 warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow']);
             }
+            if (treeConfig && !treeOpts.transform && this.stripe) {
+                warnLog('vxe.error.noTree', ['stripe']);
+            }
             if (this.showFooter && !(this.footerMethod || this.footerData)) {
                 warnLog('vxe.error.reqProp', ['footer-data | footer-method']);
             }
-            if (treeConfig && !treeOpts.transform && this.stripe) {
-                warnLog('vxe.error.noTree', ['stripe']);
+            if (rowOpts.height) {
+                warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height']);
             }
             if (this.tooltipOpts.enabled) {
                 warnLog('vxe.error.delProp', ['tooltip-config.enabled', 'tooltip-config.showAll']);
@@ -1116,7 +1339,7 @@ export default {
             endIndex: 1,
             visibleSize: 0
         });
-        this.loadTableData(data).then(() => {
+        this.loadTableData(data, true).then(() => {
             if (data && data.length) {
                 this.inited = true;
                 this.initStatus = true;
@@ -1224,10 +1447,11 @@ export default {
         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 { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore } = reactData;
         const { leftList, rightList } = columnStore;
         const loadingSlot = slots.loading;
-        const tooltipOpts = $xeTable.computeTooltipOpts;
+        const tableTipConfig = $xeTable.computeTableTipConfig;
+        const validTipConfig = $xeTable.computeValidTipConfig;
         const validOpts = $xeTable.computeValidOpts;
         const checkboxOpts = $xeTable.computeCheckboxOpts;
         const treeOpts = $xeTable.computeTreeOpts;
@@ -1243,9 +1467,11 @@ export default {
         const resizableOpts = $xeTable.computeResizableOpts;
         const isArea = mouseConfig && mouseOpts.area;
         const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
+        const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
         return h('div', {
             ref: 'refElem',
-            class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+            class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                     [`size--${vSize}`]: vSize,
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                     'vxe-editable': !!editConfig,
@@ -1258,7 +1484,6 @@ export default {
                     'row--highlight': rowOpts.isHover || highlightHoverRow,
                     'column--highlight': columnOpts.isHover || highlightHoverColumn,
                     'checkbox--range': checkboxOpts.range,
-                    'column--calc': isCalcColumn,
                     'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
                     'is--header': showHeader,
                     'is--footer': showFooter,
@@ -1267,7 +1492,6 @@ export default {
                     'is--fixed-left': leftList.length,
                     'is--fixed-right': rightList.length,
                     'is--animat': !!props.animat,
-                    'is--padding': props.padding,
                     'is--round': props.round,
                     'is--stripe': !treeConfig && stripe,
                     'is--loading': currLoading,
@@ -1294,108 +1518,15 @@ export default {
             h('div', {
                 key: 'tw',
                 class: 'vxe-table--render-wrapper'
-            }, [
-                h('div', {
-                    ref: 'refTableViewportElem',
-                    class: 'vxe-table--viewport-wrapper'
-                }, [
-                    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,
-                                size: vSize
-                            }
-                        }),
-                        /**
-                       * 表尾
-                       */
-                        showFooter
-                            ? h(TableFooterComponent, {
-                                ref: 'refTableFooter',
-                                props: {
-                                    footerTableData,
-                                    tableColumn,
-                                    size: vSize
-                                }
-                            })
-                            : renderEmptyElement($xeTable)
-                    ]),
-                    h('div', {
-                        class: 'vxe-table--fixed-wrapper'
-                    }, [
-                        leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : renderEmptyElement($xeTable),
-                        rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : renderEmptyElement($xeTable)
-                    ])
-                ]),
-                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: this.scrollYEvent
-                        }
-                    }, [
-                        h('div', {
-                            ref: 'refScrollYSpaceElem',
-                            class: 'vxe-table--scroll-y-space'
-                        })
-                    ]),
-                    h('div', {
-                        ref: 'refScrollYBottomCornerElem',
-                        class: 'vxe-table--scroll-y-bottom-corner'
-                    })
-                ])
-            ]),
-            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'
-                    })
+            }, scrollbarXToTop
+                ? [
+                    renderScrollX(h, $xeTable),
+                    renderBody(h, $xeTable)
+                ]
+                : [
+                    renderBody(h, $xeTable),
+                    renderScrollX(h, $xeTable)
                 ]),
-                h('div', {
-                    ref: 'refScrollXRightCornerElem',
-                    class: 'vxe-table--scroll-x-right-corner'
-                })
-            ]),
             /**
              * 空数据
              */
@@ -1419,18 +1550,27 @@ export default {
              * 列宽线
              */
             h('div', {
-                key: 'cl',
-                ref: 'refCellResizeBar',
-                class: 'vxe-table--resizable-bar',
-                style: overflowX
-                    ? {
-                        'padding-bottom': `${scrollbarHeight}px`
-                    }
-                    : undefined
+                key: 'tcl',
+                ref: 'refColResizeBar',
+                class: 'vxe-table--resizable-col-bar'
+            }, resizableOpts.showDragTip
+                ? [
+                    h('div', {
+                        ref: 'refColResizeTip',
+                        class: 'vxe-table--resizable-number-tip'
+                    })
+                ]
+                : []),
+            /**
+             * 行高线
+             */
+            h('div', {
+                key: 'trl',
+                ref: 'refRowResizeBar',
+                class: 'vxe-table--resizable-row-bar'
             }, resizableOpts.showDragTip
                 ? [
                     h('div', {
-                        ref: 'refCellResizeTip',
                         class: 'vxe-table--resizable-number-tip'
                     })
                 ]
@@ -1546,7 +1686,12 @@ export default {
                     ? h(VxeUITooltipComponent, {
                         key: 'btp',
                         ref: 'tooltip',
-                        props: Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+                        props: {
+                            theme: tableTipConfig.theme,
+                            enterable: tableTipConfig.enterable,
+                            enterDelay: tableTipConfig.enterDelay,
+                            leaveDelay: tableTipConfig.leaveDelay
+                        }
                     })
                     : renderEmptyElement($xeTable),
                 /**
@@ -1559,7 +1704,12 @@ export default {
                         class: [{
                                 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
                             }, 'vxe-table--valid-error'],
-                        props: validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({ isArrow: false }, tooltipOpts) : {}
+                        props: {
+                            theme: validTipConfig.theme,
+                            enterable: validTipConfig.enterable,
+                            enterDelay: validTipConfig.enterDelay,
+                            leaveDelay: validTipConfig.leaveDelay
+                        }
                     })
                     : renderEmptyElement($xeTable)
             ])