vxe-table 4.8.8 → 4.8.10

package/es/table/src/table.js

@@ -378,9 +378,25 @@ export default defineComponent({
         const computeSXOpts = computed(() => {
             return Object.assign({}, getConfig().table.scrollX, props.scrollX);
         });
+        const computeScrollXThreshold = computed(() => {
+            const sXOpts = computeSXOpts.value;
+            const { threshold } = sXOpts;
+            if (threshold) {
+                return XEUtils.toNumber(threshold);
+            }
+            return 0;
+        });
         const computeSYOpts = computed(() => {
             return Object.assign({}, getConfig().table.scrollY, props.scrollY);
         });
+        const computeScrollYThreshold = computed(() => {
+            const sYOpts = computeSYOpts.value;
+            const { threshold } = sYOpts;
+            if (threshold) {
+                return XEUtils.toNumber(threshold);
+            }
+            return 0;
+        });
         const computeRowHeightMaps = computed(() => {
             return {
                 default: 48,
@@ -2838,24 +2854,17 @@ export default defineComponent({
             setScrollLeft(bodyElem, scrollLeft);
             setScrollLeft(headerElem, scrollLeft);
             setScrollLeft(footerElem, scrollLeft);
-            setScrollLeft(bodyElem, scrollLeft);
-            setScrollLeft(headerElem, scrollLeft);
-            setScrollLeft(footerElem, scrollLeft);
         };
         const scrollXEvent = (evnt) => {
             const wrapperEl = evnt.currentTarget;
             const { scrollTop, scrollLeft } = wrapperEl;
             const isRollX = true;
             const isRollY = false;
-            internalData.lastScrollLeft = scrollLeft;
-            reactData.lastScrollTime = Date.now();
             handleSyncScrollX(scrollLeft);
             $xeTable.triggerScrollXEvent(evnt);
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
                 type: 'table',
-                fixed: '',
-                scrollTop,
-                scrollLeft
+                fixed: ''
             });
         };
         const debounceScrollYCalculate = XEUtils.debounce(function () {
@@ -2877,15 +2886,11 @@ export default defineComponent({
             const { scrollTop, scrollLeft } = wrapperEl;
             const isRollX = false;
             const isRollY = true;
-            internalData.lastScrollTop = scrollTop;
-            reactData.lastScrollTime = Date.now();
             handleSyncScrollY(scrollTop);
             $xeTable.triggerScrollYEvent(evnt);
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
                 type: 'table',
-                fixed: '',
-                scrollTop,
-                scrollLeft
+                fixed: ''
             });
         };
         let keyCtxTimeout;
@@ -3545,25 +3550,35 @@ export default defineComponent({
              * 设置为固定列
              */
             setColumnFixed(fieldOrColumn, fixed) {
-                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
-                const targetColumn = getRootColumn($xeTable, column);
-                const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+                let status = false;
+                const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
                 const columnOpts = computeColumnOpts.value;
-                if (targetColumn && targetColumn.fixed !== fixed) {
-                    // 是否超过最大固定列数量
-                    if (!targetColumn.fixed && isMaxFixedColumn) {
-                        if (VxeUI.modal) {
-                            VxeUI.modal.message({
-                                status: 'error',
-                                content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
-                            });
+                const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+                for (let i = 0; i < cols.length; i++) {
+                    const item = cols[i];
+                    const column = handleFieldOrColumn($xeTable, item);
+                    const targetColumn = getRootColumn($xeTable, column);
+                    if (targetColumn && targetColumn.fixed !== fixed) {
+                        // 是否超过最大固定列数量
+                        if (!targetColumn.fixed && isMaxFixedColumn) {
+                            if (VxeUI.modal) {
+                                VxeUI.modal.message({
+                                    status: 'error',
+                                    content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
+                                });
+                            }
+                            return nextTick();
+                        }
+                        XEUtils.eachTree([targetColumn], (column) => {
+                            column.fixed = fixed;
+                        });
+                        tablePrivateMethods.saveCustomStore('update:fixed');
+                        if (!status) {
+                            status = true;
                         }
-                        return nextTick();
                     }
-                    XEUtils.eachTree([targetColumn], (column) => {
-                        column.fixed = fixed;
-                    });
-                    tablePrivateMethods.saveCustomStore('update:fixed');
+                }
+                if (status) {
                     return tableMethods.refreshColumn();
                 }
                 return nextTick();
@@ -3572,13 +3587,22 @@ export default defineComponent({
              * 取消指定固定列
              */
             clearColumnFixed(fieldOrColumn) {
-                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
-                const targetColumn = getRootColumn($xeTable, column);
-                if (targetColumn && targetColumn.fixed) {
-                    XEUtils.eachTree([targetColumn], (column) => {
-                        column.fixed = null;
-                    });
-                    tablePrivateMethods.saveCustomStore('update:fixed');
+                let status = false;
+                const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+                cols.forEach(item => {
+                    const column = handleFieldOrColumn($xeTable, item);
+                    const targetColumn = getRootColumn($xeTable, column);
+                    if (targetColumn && targetColumn.fixed) {
+                        XEUtils.eachTree([targetColumn], (column) => {
+                            column.fixed = null;
+                        });
+                        tablePrivateMethods.saveCustomStore('update:fixed');
+                        if (!status) {
+                            status = true;
+                        }
+                    }
+                });
+                if (status) {
                     return tableMethods.refreshColumn();
                 }
                 return nextTick();
@@ -3587,9 +3611,18 @@ export default defineComponent({
              * 隐藏指定列
              */
             hideColumn(fieldOrColumn) {
-                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
-                if (column && column.visible) {
-                    column.visible = false;
+                let status = false;
+                const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+                cols.forEach(item => {
+                    const column = handleFieldOrColumn($xeTable, item);
+                    if (column && column.visible) {
+                        column.visible = false;
+                        if (!status) {
+                            status = true;
+                        }
+                    }
+                });
+                if (status) {
                     return tablePrivateMethods.handleCustom();
                 }
                 return nextTick();
@@ -3598,25 +3631,43 @@ export default defineComponent({
              * 显示指定列
              */
             showColumn(fieldOrColumn) {
-                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
-                if (column && !column.visible) {
-                    column.visible = true;
+                let status = false;
+                const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+                cols.forEach(item => {
+                    const column = handleFieldOrColumn($xeTable, item);
+                    if (column && !column.visible) {
+                        column.visible = true;
+                        if (!status) {
+                            status = true;
+                        }
+                    }
+                });
+                if (status) {
                     return tablePrivateMethods.handleCustom();
                 }
                 return nextTick();
             },
             setColumnWidth(fieldOrColumn, width) {
-                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
-                if (column) {
-                    const colWidth = XEUtils.toInteger(width);
-                    let rdWidth = colWidth;
-                    if (isScale(width)) {
-                        const tableBody = refTableBody.value;
-                        const bodyElem = tableBody ? tableBody.$el : null;
-                        const bodyWidth = bodyElem ? bodyElem.clientWidth - 1 : 0;
-                        rdWidth = Math.floor(colWidth * bodyWidth);
-                    }
-                    column.resizeWidth = rdWidth;
+                let status = false;
+                const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+                cols.forEach(item => {
+                    const column = handleFieldOrColumn($xeTable, item);
+                    if (column) {
+                        const colWidth = XEUtils.toInteger(width);
+                        let rdWidth = colWidth;
+                        if (isScale(width)) {
+                            const tableBody = refTableBody.value;
+                            const bodyElem = tableBody ? tableBody.$el : null;
+                            const bodyWidth = bodyElem ? bodyElem.clientWidth - 1 : 0;
+                            rdWidth = Math.floor(colWidth * bodyWidth);
+                        }
+                        column.resizeWidth = rdWidth;
+                        if (!status) {
+                            status = true;
+                        }
+                    }
+                });
+                if (status) {
                     return tableMethods.refreshColumn();
                 }
                 return nextTick();
@@ -4584,16 +4635,36 @@ export default defineComponent({
              */
             scrollTo(scrollLeft, scrollTop) {
                 const tableBody = refTableBody.value;
+                const tableHeader = refTableHeader.value;
                 const tableFooter = refTableFooter.value;
+                const leftBody = refTableLeftBody.value;
                 const rightBody = refTableRightBody.value;
                 const tableBodyElem = tableBody ? tableBody.$el : null;
+                const leftBodyElem = leftBody ? leftBody.$el : null;
                 const rightBodyElem = rightBody ? rightBody.$el : null;
+                const tableHeaderElem = tableHeader ? tableHeader.$el : null;
                 const tableFooterElem = tableFooter ? tableFooter.$el : null;
                 if (XEUtils.isNumber(scrollLeft)) {
-                    setScrollLeft(tableFooterElem || tableBodyElem, scrollLeft);
+                    const xHandleEl = refScrollXHandleElem.value;
+                    if (xHandleEl) {
+                        setScrollLeft(xHandleEl, scrollLeft);
+                    }
+                    else {
+                        setScrollLeft(tableBodyElem, scrollLeft);
+                        setScrollLeft(tableHeaderElem, scrollLeft);
+                        setScrollLeft(tableFooterElem, scrollLeft);
+                    }
                 }
                 if (XEUtils.isNumber(scrollTop)) {
-                    setScrollTop(rightBodyElem || tableBodyElem, scrollTop);
+                    const yHandleEl = refScrollYHandleElem.value;
+                    if (yHandleEl) {
+                        setScrollTop(yHandleEl, scrollTop);
+                    }
+                    else {
+                        setScrollTop(tableBodyElem, scrollTop);
+                        setScrollTop(leftBodyElem, scrollTop);
+                        setScrollTop(rightBodyElem, scrollTop);
+                    }
                 }
                 if (reactData.scrollXLoad || reactData.scrollYLoad) {
                     return new Promise(resolve => {
@@ -6773,13 +6844,80 @@ export default defineComponent({
             triggerScrollXEvent() {
                 loadScrollXData();
             },
-            handleScrollEvent(evnt, isRollY, isRollX, params) {
+            handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
                 const { highlightHoverRow } = props;
+                const { lastScrollLeft, lastScrollTop } = internalData;
                 const tableBody = refTableBody.value;
                 const bodyElem = tableBody ? tableBody.$el : null;
                 const rowOpts = computeRowOpts.value;
                 const validTip = refValidTooltip.value;
                 const tooltip = refTooltip.value;
+                const bodyHeight = bodyElem ? bodyElem.clientHeight : 0;
+                const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
+                const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
+                const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
+                let isTop = false;
+                let isBottom = false;
+                let isLeft = false;
+                let isRight = false;
+                let direction = '';
+                let isTopBoundary = false;
+                let isBottomBoundary = false;
+                let isLeftBoundary = false;
+                let isRightBoundary = false;
+                if (isRollX) {
+                    const xThreshold = computeScrollXThreshold.value;
+                    isLeft = scrollLeft <= 0;
+                    if (!isLeft) {
+                        isRight = scrollLeft + bodyWidth >= scrollWidth;
+                    }
+                    if (scrollLeft > lastScrollLeft) {
+                        direction = 'right';
+                        if (scrollLeft + bodyWidth >= scrollWidth - xThreshold) {
+                            isRightBoundary = true;
+                        }
+                    }
+                    else {
+                        direction = 'left';
+                        if (scrollLeft <= xThreshold) {
+                            isLeftBoundary = true;
+                        }
+                    }
+                    tablePrivateMethods.checkScrolling();
+                    internalData.lastScrollLeft = scrollLeft;
+                    reactData.lastScrollTime = Date.now();
+                }
+                else {
+                    const yThreshold = computeScrollYThreshold.value;
+                    isTop = scrollTop <= 0;
+                    if (!isTop) {
+                        isBottom = scrollTop + bodyHeight >= scrollHeight;
+                    }
+                    if (scrollTop > lastScrollTop) {
+                        direction = 'bottom';
+                        if (scrollTop + bodyHeight >= scrollHeight - yThreshold) {
+                            isBottomBoundary = true;
+                        }
+                    }
+                    else {
+                        direction = 'top';
+                        if (scrollTop <= yThreshold) {
+                            isTopBoundary = true;
+                        }
+                    }
+                    internalData.lastScrollTop = scrollTop;
+                    reactData.lastScrollTime = Date.now();
+                }
+                const evntParams = Object.assign({ scrollTop,
+                    scrollLeft,
+                    bodyHeight,
+                    bodyWidth,
+                    scrollHeight,
+                    scrollWidth, isX: isRollX, isY: isRollY, isTop,
+                    isBottom,
+                    isLeft,
+                    isRight,
+                    direction }, params);
                 if (rowOpts.isHover || highlightHoverRow) {
                     $xeTable.clearHoverRow();
                 }
@@ -6789,17 +6927,9 @@ export default defineComponent({
                 if (tooltip && tooltip.reactData.visible) {
                     tooltip.close();
                 }
-                if (isRollX) {
-                    tablePrivateMethods.checkScrolling();
+                if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+                    dispatchEvent('scroll-boundary', evntParams, evnt);
                 }
-                const bodyHeight = bodyElem ? bodyElem.clientHeight : 0;
-                const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
-                const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
-                const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
-                const evntParams = Object.assign({ bodyHeight,
-                    bodyWidth,
-                    scrollHeight,
-                    scrollWidth, isX: isRollX, isY: isRollY }, params);
                 dispatchEvent('scroll', evntParams, evnt);
             },
             /**

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.8.8";
+export const version = "4.8.10";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"4.8.8"}`;
+const version = `table v${"4.8.10"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);