vxe-table 3.25.0-beta.3 → 3.25.0-beta.5

package/es/table/src/table.js

@@ -25,6 +25,25 @@ import validatorMixin from '../module/validator/mixin';
 import customMixin from '../module/custom/mixin';
 const { warnLog, errLog } = createComponentLog('table');
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, domUtils, globalMixins, renderEmptyElement } = VxeUI;
+function bindScrollbarResize($xeTable) {
+    const internalData = $xeTable;
+    const { elemStore } = internalData;
+    const isVScrollbar = $xeTable.computeIsVScrollbar;
+    if (isVScrollbar) {
+        const el = $xeTable.$refs.refElem;
+        const viewInnerEl = getRefElem(elemStore['main-body-table']);
+        const scrollObserver = globalResize.create(() => {
+            $xeTable.reScrollFlag++;
+        });
+        if (el) {
+            scrollObserver.observe(el);
+        }
+        if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+        }
+        internalData.scrollObserver = scrollObserver;
+    }
+}
 function handleUpdateMergeBodyCells($xeTable, merges) {
     const internalData = $xeTable;
     internalData.mergeBodyList = [];
@@ -527,13 +546,12 @@ function renderNativeBody(h, $xeTable) {
         ]);
 }
 function renderVirtualBody(h, $xeTable) {
-    const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
     const $xeGantt = $xeTable.$xeGantt;
     const $xeGanttView = internalData.xeGanttView;
-    const { useScrollbar } = props;
     const { xThumbWidth, yThumbHeight } = reactData;
+    const isVScrollbar = $xeTable.computeIsVScrollbar;
     const scrollbarOpts = $xeTable.computeScrollbarOpts;
     const scrollXAutoHide = $xeTable.computeScrollXAutoHide;
     const scrollYAutoHide = $xeTable.computeScrollYAutoHide;
@@ -547,10 +565,10 @@ function renderVirtualBody(h, $xeTable) {
     return h('div', {
         key: 'lvb',
         class: ['vxe-table--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
-                'is--virtual-scrollbar': useScrollbar,
-                'ov-padding': useScrollbar && scrollbarOpts.padding,
-                'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-                'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                'is--virtual-scrollbar': isVScrollbar,
+                'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             }]
@@ -608,6 +626,8 @@ export default {
     name: 'VxeTable',
     mixins: [
         globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin,
+        globalMixins.initVScrollbarMixin,
         filterMixin,
         menuMixin,
         editMixin,
@@ -992,8 +1012,8 @@ export default {
         computeTooltipOpts() {
             const $xeTable = this;
             const props = $xeTable;
-            const { useScrollbar } = props;
-            return Object.assign({ useScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
+            const isVScrollbar = $xeTable.computeIsVScrollbar;
+            return Object.assign({ useScrollbar: isVScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
         },
         tipConfig() {
             return Object.assign({}, this.tooltipOpts);
@@ -1056,7 +1076,8 @@ export default {
         computeFilterOpts() {
             const $xeTable = this;
             const props = $xeTable;
-            return Object.assign({}, getConfig().table.filterConfig, props.filterConfig);
+            const isVScrollbar = $xeTable.computeIsVScrollbar;
+            return Object.assign({ useScrollbar: isVScrollbar }, getConfig().table.filterConfig, props.filterConfig);
         },
         computeFloatingFilterOpts() {
             const $xeTable = this;
@@ -1638,34 +1659,37 @@ export default {
             const $xeTable = this;
             $xeTable.reLayoutFlag++;
         },
+        computeIsVScrollbar() {
+            const $xeTable = this;
+            $xeTable.$nextTick(() => {
+                bindScrollbarResize($xeTable);
+                $xeTable.$nextTick(() => {
+                    $xeTable.reLayoutFlag++;
+                });
+            });
+        },
         computeScrollbarXToTop() {
             const $xeTable = this;
-            $xeTable.reScrollFlag++;
             $xeTable.reLayoutFlag++;
         },
         computeScrollbarYToLeft() {
             const $xeTable = this;
-            $xeTable.reScrollFlag++;
             $xeTable.reLayoutFlag++;
         },
         computeScrollXVisible() {
             const $xeTable = this;
-            $xeTable.reScrollFlag++;
             $xeTable.reLayoutFlag++;
         },
         computeScrollYVisible() {
             const $xeTable = this;
-            $xeTable.reScrollFlag++;
             $xeTable.reLayoutFlag++;
         },
         computeScrollXHeight() {
             const $xeTable = this;
-            $xeTable.reScrollFlag++;
             $xeTable.reLayoutFlag++;
         },
         computeScrollYWidth() {
             const $xeTable = this;
-            $xeTable.reScrollFlag++;
             $xeTable.reLayoutFlag++;
         },
         computeCellHeitht() {
@@ -1674,17 +1698,14 @@ export default {
         },
         reLayoutFlag() {
             const $xeTable = this;
-            $xeTable.$nextTick(() => {
+            $xeTable.$nextTick().then(() => {
                 $xeTable.recalculate(true);
             });
         },
         reScrollFlag() {
             const $xeTable = this;
-            $xeTable.$nextTick(() => {
+            $xeTable.updateScrollbar().then(() => {
                 $xeTable.updateScrollbar();
-                $xeTable.$nextTick(() => {
-                    $xeTable.updateScrollbar();
-                });
             });
         },
         footerData() {
@@ -2130,12 +2151,13 @@ export default {
             warnLog('vxe.error.reqProp', ['tooltip-config']);
         }
         $xeTable.$nextTick(() => {
-            const { useScrollbar, autoResize } = props;
+            const { autoResize } = props;
             const { elemStore } = internalData;
             // 使用已安装的组件，如果未安装则不渲染
             const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
             const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
             const { showOverflow, showHeaderOverflow, showFooterOverflow } = props;
+            const isVScrollbar = $xeTable.computeIsVScrollbar;
             const tooltipOpts = $xeTable.computeTooltipOpts;
             const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts;
             const footerTooltipOpts = $xeTable.computeFooterTooltipOpts;
@@ -2176,7 +2198,7 @@ export default {
                 }
             }
             const el = $xeTable.$refs.refElem;
-            if (useScrollbar) {
+            if (isVScrollbar) {
                 const viewInnerEl = getRefElem(elemStore['main-body-table']);
                 const scrollObserver = globalResize.create(() => {
                     $xeTable.reScrollFlag++;
@@ -2291,9 +2313,10 @@ export default {
         const slots = $xeTable.$scopedSlots;
         const reactData = $xeTable;
         const { xID } = $xeTable;
-        const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
+        const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
         const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData;
         const { leftList, rightList } = columnStore;
+        const isVScrollbar = $xeTable.computeIsVScrollbar;
         const loadingSlot = slots.loading;
         const tipSlots = {
             header: slots.headerTooltip || slots['header-tooltip'],
@@ -2335,7 +2358,7 @@ export default {
         }
         return h('div', {
             ref: 'refElem',
-            class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+            class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, isVScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                     [`size--${vSize}`]: vSize,
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                     'vxe-editable': !!editConfig,
@@ -2403,7 +2426,7 @@ export default {
             h('div', {
                 key: 'tw',
                 class: 'vxe-table--render-wrapper'
-            }, useScrollbar
+            }, isVScrollbar
                 ? [renderVirtualBody(h, $xeTable)]
                 : (scrollbarXToTop
                     ? [
@@ -2591,7 +2614,7 @@ export default {
                         props: {
                             isArrow: false,
                             enterable: false,
-                            useScrollbar
+                            useScrollbar: isVScrollbar
                         }
                     })
                     : renderEmptyElement($xeTable),
@@ -2663,7 +2686,7 @@ export default {
                             enterable: validTipConfig.enterable,
                             enterDelay: validTipConfig.enterDelay,
                             leaveDelay: validTipConfig.leaveDelay,
-                            useScrollbar
+                            useScrollbar: validTipConfig.useScrollbar
                         }
                     })
                     : renderEmptyElement($xeTable)

package/es/table/src/util.js

@@ -244,8 +244,7 @@ export function createReactData() {
             isIndeterminate: false,
             style: null,
             column: null,
-            visible: false,
-            maxHeight: null
+            visible: false
         },
         // 存放列相关的信息
         columnStore: {

package/es/table/style.css

@@ -1606,6 +1606,7 @@
 .vxe-table--filter-wrapper {
   display: none;
   position: absolute;
+  flex-direction: column;
   top: 0;
   min-width: 100px;
   font-size: var(--vxe-ui-font-size-default);
@@ -1615,16 +1616,30 @@
   color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 15;
+  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
 }
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-header,
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-body {
   text-align: center;
 }
 .vxe-table--filter-wrapper.is--active {
-  display: block;
+  display: flex;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li {
+.vxe-table--filter-wrapper .vxe-table--filter-body,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
+  overflow: auto;
+  flex-grow: 1;
+}
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
+  display: flex;
+  flex-direction: column;
+}
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--scrollbar-filter-body-view {
+  flex-grow: 1;
+}
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1632,22 +1647,25 @@
   padding: 0.25em 0.8em;
   cursor: pointer;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li.is--checked,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li.is--checked {
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option.is--checked,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option.is--checked,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option.is--checked {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li:hover,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li:hover {
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option:hover,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option:hover,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option:hover {
   background-color: var(--vxe-ui-table-row-hover-background-color);
 }
 .vxe-table--filter-wrapper .vxe-table--filter-header {
   padding-top: 0.2em;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-body {
-  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
+.vxe-table--filter-wrapper .vxe-table--filter-body,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
   padding-bottom: 0.2em;
 }
-.vxe-table--filter-wrapper > ul {
+.vxe-table--filter-wrapper .vxe-table--filter-header,
+.vxe-table--filter-wrapper .vxe-table--filter-body {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1657,8 +1675,9 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-table--filter-wrapper.is--multiple > ul > li {
-  padding: 0.25em 0.8em 0.25em 1em;
+.vxe-table--filter-wrapper .vxe-table--filter-header,
+.vxe-table--filter-wrapper .vxe-table--filter-footer {
+  flex-shrink: 0;
 }
 .vxe-table--filter-wrapper .vxe-table--filter-footer {
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);