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

package/es/table/module/filter/mixin.js

@@ -11,7 +11,7 @@ function updatePopupStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const $xeGGWrapper = $xeGrid || $xeGantt;
-    const { filterStore } = reactData;
+    const { filterStore, scrollbarHeight } = reactData;
     const { elemStore } = internalData;
     const { column, targetEl } = filterStore;
     if (!column) {
@@ -32,8 +32,6 @@ function updatePopupStyle($xeTable) {
     if (!filterWrapperElem) {
         return $xeTable.$nextTick();
     }
-    const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-    const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
     /**
      * 是否显示筛选按钮图标
      * 如果不存在图标，则相对单元格居中显示
@@ -72,9 +70,9 @@ function updatePopupStyle($xeTable) {
         else {
             const filterWidth = filterWrapperElem.offsetWidth;
             const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
-            maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
             left = btnRect.left - tableRect.left - centerWidth;
             top = btnRect.top - tableRect.top + currEl.clientHeight;
+            maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight);
             if (left < 1) {
                 left = 1;
             }
@@ -96,7 +94,6 @@ function updatePopupStyle($xeTable) {
         if (zIndex) {
             panelStyle.zIndex = zIndex;
         }
-        filterStore.style = panelStyle;
         // 筛选面板是自适应表格高度
         if (compConf ? !compConf.tableFilterAutoHeight : false) {
             maxHeight = 0;
@@ -106,8 +103,8 @@ function updatePopupStyle($xeTable) {
                 maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
             }
         }
-        // 判断面板不能大于表格高度
-        filterStore.maxHeight = maxHeight;
+        panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none';
+        filterStore.style = panelStyle;
     };
     handleStyle();
     return $xeTable.$nextTick().then(() => {

package/es/table/module/filter/panel.js

@@ -1,7 +1,7 @@
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText, isEnableConf } from '../../../ui/src/utils';
-import { getPropClass, toCssUnit } from '../../../ui/src/dom';
+import { getPropClass } from '../../../ui/src/dom';
 import { getSlotVNs } from '../../../ui/src/vn';
 import { createComponentLog } from '../../../ui/src/log';
 const { warnLog } = createComponentLog('table');
@@ -118,15 +118,18 @@ export default {
          * Publish methods
          *************************/
         renderOptions(h, filterRender, compConf) {
+            const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar');
             const $xeFilterPanel = this;
             const props = $xeFilterPanel;
             const $xeTable = $xeFilterPanel.$xeTable;
             const tableInternalData = $xeTable;
             const { filterStore } = props;
-            const { column, maxHeight } = filterStore;
+            const { column } = filterStore;
             if (!column) {
                 return [];
             }
+            const filterOpts = $xeTable.computeFilterOpts;
+            const { useScrollbar } = filterOpts;
             const { filterMultiple, filters, slots } = column;
             const filterOptions = (filters || []);
             const filterSlot = slots ? slots.filter : null;
@@ -135,34 +138,51 @@ export default {
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: toCssUnit(maxHeight)
-                            }
-                            : {}
+                        class: 'vxe-table--filter-template'
                     }, $xeTable.callSlot(filterSlot, params, h))
                 ];
             }
             else if (filterRender && rtFilter) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: toCssUnit(maxHeight)
-                            }
-                            : {}
+                        class: 'vxe-table--filter-template'
                     }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
                 ];
             }
             const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked);
             const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate;
+            const optVNs = filterOptions.map((item) => {
+                const isChecked = item._checked;
+                const isIndeterminate = false;
+                return h('div', {
+                    class: ['vxe-table--filter-option', {
+                            'is--checked': isChecked
+                        }],
+                    attrs: {
+                        title: item.label
+                    },
+                    on: {
+                        click: (evnt) => {
+                            $xeFilterPanel.changeOption(evnt, !item._checked, item);
+                        }
+                    }
+                }, (filterMultiple
+                    ? [
+                        h('span', {
+                            class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                        })
+                    ]
+                    : []).concat([
+                    h('span', {
+                        class: 'vxe-checkbox--label'
+                    }, formatText(item.label, 1))
+                ]));
+            });
             return [
-                h('ul', {
+                h('div', {
                     class: 'vxe-table--filter-header'
                 }, [
-                    h('li', {
+                    h('div', {
                         class: ['vxe-table--filter-option', {
                                 'is--checked': isAllChecked,
                                 'is--indeterminate': isAllIndeterminate
@@ -187,40 +207,19 @@ export default {
                         }, getI18n('vxe.table.allFilter'))
                     ]))
                 ]),
-                h('ul', {
-                    class: 'vxe-table--filter-body',
-                    style: maxHeight
-                        ? {
-                            maxHeight: toCssUnit(maxHeight)
-                        }
-                        : {}
-                }, filterOptions.map((item) => {
-                    const isChecked = item._checked;
-                    const isIndeterminate = false;
-                    return h('li', {
-                        class: ['vxe-table--filter-option', {
-                                'is--checked': isChecked
-                            }],
-                        attrs: {
-                            title: item.label
+                useScrollbar
+                    ? h(VxeUIScrollbarComponent, {
+                        class: 'vxe-table--scrollbar-filter-body',
+                        props: {
+                            viewClassName: 'vxe-table--scrollbar-filter-body-view'
                         },
-                        on: {
-                            click: (evnt) => {
-                                $xeFilterPanel.changeOption(evnt, !item._checked, item);
-                            }
+                        scopedSlots: {
+                            default: () => optVNs
                         }
-                    }, (filterMultiple
-                        ? [
-                            h('span', {
-                                class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                            })
-                        ]
-                        : []).concat([
-                        h('span', {
-                            class: 'vxe-checkbox--label'
-                        }, formatText(item.label, 1))
-                    ]));
-                }))
+                    })
+                    : h('div', {
+                        class: 'vxe-table--filter-body'
+                    }, optVNs)
             ];
         },
         renderFooter(h) {

package/es/table/src/methods.js

@@ -3118,6 +3118,7 @@ function handleRecalculateStyle($xeTable, reFull, reWidth, reHeight) {
         if (reFull) {
             updateTreeLineStyle($xeTable);
         }
+        $xeTable.updateScrollbar();
         internalData.rceRunTime = Date.now();
         if (reFull) {
             return computeScrollLoad($xeTable);
@@ -9954,8 +9955,14 @@ const tableMethods = {
      */
     updateScrollbar() {
         const $xeTable = this;
-        $xeTable.updateThumbSize();
-        $xeTable.updateThumbOffset();
+        const isVScrollbar = $xeTable.computeIsVScrollbar;
+        if (isVScrollbar) {
+            return $xeTable.$nextTick().then(() => {
+                $xeTable.updateThumbSize();
+                $xeTable.updateThumbOffset();
+            });
+        }
+        return Promise.resolve();
     },
     /**
      * 表头单元格按下事件
@@ -12384,11 +12391,10 @@ const tableMethods = {
     },
     triggerBodyScrollEvent(evnt, fixedType) {
         const $xeTable = this;
-        const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { useScrollbar } = props;
         const { scrollYLoad, scrollXLoad } = reactData;
+        const isVScrollbar = $xeTable.computeIsVScrollbar;
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
             return;
@@ -12407,7 +12413,7 @@ const tableMethods = {
         if (!bodyScrollElem) {
             return;
         }
-        if (!useScrollbar) {
+        if (!isVScrollbar) {
             if (!xHandleEl) {
                 return;
             }

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
             }]
@@ -992,8 +1010,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 +1074,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 +1657,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 +1696,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 +2149,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 +2196,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 +2311,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 +2356,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 +2424,7 @@ export default {
             h('div', {
                 key: 'tw',
                 class: 'vxe-table--render-wrapper'
-            }, useScrollbar
+            }, isVScrollbar
                 ? [renderVirtualBody(h, $xeTable)]
                 : (scrollbarXToTop
                     ? [
@@ -2591,7 +2612,7 @@ export default {
                         props: {
                             isArrow: false,
                             enterable: false,
-                            useScrollbar
+                            useScrollbar: isVScrollbar
                         }
                     })
                     : renderEmptyElement($xeTable),
@@ -2663,7 +2684,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);