vxe-table 4.10.6-beta.6 → 4.10.6-beta.8

package/es/table/src/table.js

@@ -367,9 +367,12 @@ export default defineComponent({
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
         const refScrollXHandleElem = ref();
+        const refScrollXLeftCornerElem = ref();
         const refScrollXRightCornerElem = ref();
         const refScrollYHandleElem = ref();
         const refScrollYTopCornerElem = ref();
+        const refScrollXWrapperElem = ref();
+        const refScrollYWrapperElem = ref();
         const refScrollYBottomCornerElem = ref();
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
@@ -419,6 +422,14 @@ export default defineComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+        });
         const computeScrollYThreshold = computed(() => {
             const sYOpts = computeSYOpts.value;
             const { threshold } = sYOpts;
@@ -679,6 +690,8 @@ export default defineComponent({
             computeVirtualXOpts,
             computeVirtualYOpts,
             computeScrollbarOpts,
+            computeScrollbarXToTop,
+            computeScrollbarYToLeft,
             computeColumnOpts,
             computeScrollXThreshold,
             computeScrollYThreshold,
@@ -1710,19 +1723,26 @@ export default defineComponent({
                 }
                 bodyHeight = Math.max(bodyMinHeight, bodyHeight);
             }
+            const xLeftCornerEl = refScrollXLeftCornerElem.value;
+            const xRightCornerEl = refScrollXRightCornerElem.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollXVirtualEl = refScrollXVirtualElem.value;
             if (scrollXVirtualEl) {
                 scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
                 scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden';
             }
-            const xHandleEl = refScrollXHandleElem.value;
-            if (xHandleEl) {
-                xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+            const xWrapperEl = refScrollXWrapperElem.value;
+            if (xWrapperEl) {
+                xWrapperEl.style.left = scrollbarXToTop ? `${scrollbarWidth}px` : '';
+                xWrapperEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+            }
+            if (xLeftCornerEl) {
+                xLeftCornerEl.style.width = scrollbarXToTop ? `${scrollbarWidth}px` : '';
+                xLeftCornerEl.style.display = scrollbarXToTop ? (scrollbarWidth && scrollbarHeight ? 'block' : '') : '';
             }
-            const xRightCornerEl = refScrollXRightCornerElem.value;
             if (xRightCornerEl) {
-                xRightCornerEl.style.width = `${scrollbarWidth}px`;
-                xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : '';
+                xRightCornerEl.style.width = scrollbarXToTop ? '' : `${scrollbarWidth}px`;
+                xRightCornerEl.style.display = scrollbarXToTop ? '' : (scrollbarWidth && scrollbarHeight ? 'block' : '');
             }
             const scrollYVirtualEl = refScrollYVirtualElem.value;
             if (scrollYVirtualEl) {
@@ -1735,10 +1755,10 @@ export default defineComponent({
                 yTopCornerEl.style.height = `${headerHeight}px`;
                 yTopCornerEl.style.display = headerHeight ? 'block' : '';
             }
-            const yHandleEl = refScrollYHandleElem.value;
-            if (yHandleEl) {
-                yHandleEl.style.height = `${bodyHeight}px`;
-                yHandleEl.style.top = `${headerHeight}px`;
+            const yWrapperEl = refScrollYWrapperElem.value;
+            if (yWrapperEl) {
+                yWrapperEl.style.height = `${bodyHeight}px`;
+                yWrapperEl.style.top = `${headerHeight}px`;
             }
             const yBottomCornerEl = refScrollYBottomCornerElem.value;
             if (yBottomCornerEl) {
@@ -3109,68 +3129,6 @@ export default defineComponent({
                 loadScrollYData();
             }, fpsTime);
         };
-        const scrollXEvent = (evnt) => {
-            const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
-            if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-                return;
-            }
-            if (inWheelScroll) {
-                return;
-            }
-            const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
-            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-            const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
-            const yHandleEl = refScrollYHandleElem.value;
-            const wrapperEl = evnt.currentTarget;
-            const { scrollLeft } = wrapperEl;
-            const yBodyEl = yHandleEl || bodyScrollElem;
-            let scrollTop = 0;
-            if (yBodyEl) {
-                scrollTop = yBodyEl.scrollTop;
-            }
-            const isRollX = true;
-            const isRollY = scrollTop !== lastScrollTop;
-            internalData.inVirtualScroll = true;
-            setScrollLeft(bodyScrollElem, scrollLeft);
-            setScrollLeft(headerScrollElem, scrollLeft);
-            setScrollLeft(footerScrollElem, scrollLeft);
-            $xeTable.triggerScrollXEvent(evnt);
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                type: 'table',
-                fixed: ''
-            });
-        };
-        const scrollYEvent = (evnt) => {
-            const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
-            if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-                return;
-            }
-            if (inWheelScroll) {
-                return;
-            }
-            const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
-            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-            const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
-            const xHandleEl = refScrollXHandleElem.value;
-            const wrapperEl = evnt.currentTarget;
-            const { scrollTop } = wrapperEl;
-            const xBodyEl = xHandleEl || bodyScrollElem;
-            let scrollLeft = 0;
-            if (xBodyEl) {
-                scrollLeft = xBodyEl.scrollLeft;
-            }
-            const isRollX = scrollLeft !== lastScrollLeft;
-            const isRollY = true;
-            internalData.inVirtualScroll = true;
-            setScrollTop(bodyScrollElem, scrollTop);
-            setScrollTop(leftScrollElem, scrollTop);
-            setScrollTop(rightScrollElem, scrollTop);
-            $xeTable.triggerScrollYEvent(evnt);
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                type: 'table',
-                fixed: ''
-            });
-        };
         const checkLastSyncScroll = (isRollX, isRollY) => {
             const { scrollXLoad, scrollYLoad } = reactData;
             const { lcsTimeout } = internalData;
@@ -3212,6 +3170,12 @@ export default defineComponent({
             }
             return nextTick();
         };
+        function handleUupdateResize() {
+            const el = refElem.value;
+            if (el && el.clientWidth && el.clientHeight) {
+                tableMethods.recalculate();
+            }
+        }
         tableMethods = {
             dispatchEvent,
             /**
@@ -6163,6 +6127,7 @@ export default defineComponent({
                 const rdLineEl = refDragRowLineElem.value;
                 if (rdLineEl) {
                     if (showLine) {
+                        const scrollbarYToLeft = computeScrollbarYToLeft.value;
                         const trRect = trEl.getBoundingClientRect();
                         let trHeight = trEl.clientHeight;
                         const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
@@ -6170,6 +6135,7 @@ export default defineComponent({
                             trHeight = tableHeight - offsetTop - scrollbarHeight;
                         }
                         rdLineEl.style.display = 'block';
+                        rdLineEl.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`;
                         rdLineEl.style.top = `${offsetTop}px`;
                         rdLineEl.style.height = `${trHeight}px`;
                         rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
@@ -6185,6 +6151,7 @@ export default defineComponent({
                 const cdLineEl = refDragColLineElem.value;
                 if (cdLineEl) {
                     if (showLine) {
+                        const scrollbarXToTop = computeScrollbarXToTop.value;
                         const leftContainerElem = refLeftContainer.value;
                         const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
                         const rightContainerElem = refRightContainer.value;
@@ -6210,7 +6177,7 @@ export default defineComponent({
                             cdLineEl.style.height = `${thRect.height}px`;
                         }
                         else {
-                            cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`;
+                            cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : scrollbarHeight)}px`;
                         }
                         cdLineEl.setAttribute('drag-pos', dragPos);
                         cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -8302,6 +8269,68 @@ export default defineComponent({
                     });
                 }
             },
+            triggerVirtualScrollXEvent(evnt) {
+                const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
+                if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+                    return;
+                }
+                if (inWheelScroll) {
+                    return;
+                }
+                const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+                const yHandleEl = refScrollYHandleElem.value;
+                const wrapperEl = evnt.currentTarget;
+                const { scrollLeft } = wrapperEl;
+                const yBodyEl = yHandleEl || bodyScrollElem;
+                let scrollTop = 0;
+                if (yBodyEl) {
+                    scrollTop = yBodyEl.scrollTop;
+                }
+                const isRollX = true;
+                const isRollY = scrollTop !== lastScrollTop;
+                internalData.inVirtualScroll = true;
+                setScrollLeft(bodyScrollElem, scrollLeft);
+                setScrollLeft(headerScrollElem, scrollLeft);
+                setScrollLeft(footerScrollElem, scrollLeft);
+                $xeTable.triggerScrollXEvent(evnt);
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                    type: 'table',
+                    fixed: ''
+                });
+            },
+            triggerVirtualScrollYEvent(evnt) {
+                const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
+                if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+                    return;
+                }
+                if (inWheelScroll) {
+                    return;
+                }
+                const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+                const xHandleEl = refScrollXHandleElem.value;
+                const wrapperEl = evnt.currentTarget;
+                const { scrollTop } = wrapperEl;
+                const xBodyEl = xHandleEl || bodyScrollElem;
+                let scrollLeft = 0;
+                if (xBodyEl) {
+                    scrollLeft = xBodyEl.scrollLeft;
+                }
+                const isRollX = scrollLeft !== lastScrollLeft;
+                const isRollY = true;
+                internalData.inVirtualScroll = true;
+                setScrollTop(bodyScrollElem, scrollTop);
+                setScrollTop(leftScrollElem, scrollTop);
+                setScrollTop(rightScrollElem, scrollTop);
+                $xeTable.triggerScrollYEvent(evnt);
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                    type: 'table',
+                    fixed: ''
+                });
+            },
             /**
              * 对于树形结构中，可以直接滚动到指定深层节点中
              * 对于某些特定的场景可能会用到，比如定位到某一节点
@@ -8674,15 +8703,133 @@ export default defineComponent({
             }
             return renderEmptyElement($xeTable);
         };
-        function handleUupdateResize() {
-            const el = refElem.value;
-            if (el && el.clientWidth && el.clientHeight) {
-                tableMethods.recalculate();
-            }
-        }
+        const renderScrollX = () => {
+            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',
+                        onScroll: $xeTable.triggerVirtualScrollXEvent
+                    }, [
+                        h('div', {
+                            ref: refScrollXSpaceElem,
+                            class: 'vxe-table--scroll-x-space'
+                        })
+                    ])
+                ]),
+                h('div', {
+                    ref: refScrollXRightCornerElem,
+                    class: 'vxe-table--scroll-x-right-corner'
+                })
+            ]);
+        };
+        const renderScrollY = () => {
+            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',
+                        onScroll: $xeTable.triggerVirtualScrollYEvent
+                    }, [
+                        h('div', {
+                            ref: refScrollYSpaceElem,
+                            class: 'vxe-table--scroll-y-space'
+                        })
+                    ])
+                ]),
+                h('div', {
+                    ref: refScrollYBottomCornerElem,
+                    class: 'vxe-table--scroll-y-bottom-corner'
+                })
+            ]);
+        };
+        const renderViewport = () => {
+            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,
+                            tableData,
+                            tableColumn,
+                            tableGroupColumn
+                        })
+                        : renderEmptyElement($xeTable),
+                    /**
+                     * 表体
+                     */
+                    h(TableBodyComponent, {
+                        ref: refTableBody,
+                        tableData,
+                        tableColumn
+                    }),
+                    /**
+                     * 表尾
+                     */
+                    showFooter
+                        ? h(TableFooterComponent, {
+                            ref: refTableFooter,
+                            footerTableData,
+                            tableColumn
+                        })
+                        : renderEmptyElement($xeTable)
+                ]),
+                h('div', {
+                    class: 'vxe-table--fixed-wrapper'
+                }, [
+                    leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
+                    rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
+                ])
+            ]);
+        };
+        const renderBody = () => {
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            return h('div', {
+                class: 'vxe-table--layout-wrapper'
+            }, scrollbarYToLeft
+                ? [
+                    renderScrollY(),
+                    renderViewport()
+                ]
+                : [
+                    renderViewport(),
+                    renderScrollY()
+                ]);
+        };
         const renderVN = () => {
             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 { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
             const tooltipOpts = computeTooltipOpts.value;
@@ -8701,9 +8848,11 @@ export default defineComponent({
             const resizableOpts = computeResizableOpts.value;
             const isArea = mouseConfig && mouseOpts.area;
             const columnDragOpts = computeColumnDragOpts.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
             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,
@@ -8747,95 +8896,15 @@ export default defineComponent({
                 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,
-                                    tableData,
-                                    tableColumn,
-                                    tableGroupColumn
-                                })
-                                : renderEmptyElement($xeTable),
-                            /**
-                             * 表体
-                             */
-                            h(TableBodyComponent, {
-                                ref: refTableBody,
-                                tableData,
-                                tableColumn
-                            }),
-                            /**
-                             * 表尾
-                             */
-                            showFooter
-                                ? h(TableFooterComponent, {
-                                    ref: refTableFooter,
-                                    footerTableData,
-                                    tableColumn
-                                })
-                                : renderEmptyElement($xeTable)
-                        ]),
-                        h('div', {
-                            class: 'vxe-table--fixed-wrapper'
-                        }, [
-                            leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-                            rightList && rightList.length && overflowX ? renderFixed('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',
-                            onScroll: 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',
-                        onScroll: scrollXEvent
-                    }, [
-                        h('div', {
-                            ref: refScrollXSpaceElem,
-                            class: 'vxe-table--scroll-x-space'
-                        })
+                }, scrollbarXToTop
+                    ? [
+                        renderScrollX(),
+                        renderBody()
+                    ]
+                    : [
+                        renderBody(),
+                        renderScrollX()
                     ]),
-                    h('div', {
-                        ref: refScrollXRightCornerElem,
-                        class: 'vxe-table--scroll-x-right-corner'
-                    })
-                ]),
                 /**
                  * 空数据
                  */
@@ -8861,12 +8930,7 @@ export default defineComponent({
                 h('div', {
                     key: 'cl',
                     ref: refCellResizeBar,
-                    class: 'vxe-table--resizable-bar',
-                    style: overflowX
-                        ? {
-                            'padding-bottom': `${scrollbarHeight}px`
-                        }
-                        : null
+                    class: 'vxe-table--resizable-bar'
                 }, resizableOpts.showDragTip
                     ? [
                         h('div', {
@@ -9044,16 +9108,37 @@ export default defineComponent({
                 tableMethods.refreshColumn();
             });
         });
+        const reScrollFlag = ref(0);
+        watch(computeSize, () => {
+            reScrollFlag.value++;
+        });
         watch(() => props.showHeader, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
+            reScrollFlag.value++;
         });
         watch(() => props.showFooter, () => {
+            reScrollFlag.value++;
+        });
+        watch(reScrollFlag, () => {
             nextTick(() => {
                 tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
             });
         });
+        const reLayoutFlag = ref(0);
+        watch(() => props.height, () => {
+            reLayoutFlag.value++;
+        });
+        watch(() => props.maxHeight, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollbarXToTop, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollbarYToLeft, () => {
+            reLayoutFlag.value++;
+        });
+        watch(reLayoutFlag, () => {
+            nextTick(() => tableMethods.recalculate(true));
+        });
         const footFlag = ref(0);
         watch(() => props.footerData ? props.footerData.length : -1, () => {
             footFlag.value++;
@@ -9064,17 +9149,6 @@ export default defineComponent({
         watch(footFlag, () => {
             tableMethods.updateFooter();
         });
-        watch(() => props.height, () => {
-            nextTick(() => tableMethods.recalculate(true));
-        });
-        watch(() => props.maxHeight, () => {
-            nextTick(() => tableMethods.recalculate(true));
-        });
-        watch(computeSize, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
-        });
         watch(() => props.syncResize, (value) => {
             if (value) {
                 handleUupdateResize();