vxe-table 4.13.0 → 4.13.2

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

@@ -2,7 +2,7 @@ import { nextTick } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util';
-import { toCssUnit, triggerEvent } from '../../../ui/src/dom';
+import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer, hooks } = VxeUI;
 const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'resetFilterPanel', 'getCheckedFilters', 'updateFilterOptionStatus'];
@@ -67,6 +67,9 @@ hooks.add('tableFilterModule', {
                 }
                 else {
                     const el = refElem.value;
+                    const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
+                    const filterOpts = computeFilterOpts.value;
+                    const { transfer } = filterOpts;
                     const tableRect = el.getBoundingClientRect();
                     const btnElem = evnt.currentTarget;
                     const { filters, filterMultiple, filterRender } = column;
@@ -98,23 +101,45 @@ hooks.add('tableFilterModule', {
                             return;
                         }
                         const tableFilter = refTableFilter.value;
-                        const filterWrapperElem = tableFilter ? tableFilter.$el : null;
+                        const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value : null;
                         if (!filterWrapperElem) {
                             return;
                         }
                         const btnRect = btnElem.getBoundingClientRect();
-                        const filterWidth = filterWrapperElem.offsetWidth;
                         const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
                         const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+                        const filterWidth = filterWrapperElem.offsetWidth;
                         const centerWidth = filterWidth / 2;
-                        const left = btnRect.left - tableRect.left - centerWidth;
-                        const top = btnRect.top - tableRect.top + btnElem.clientHeight;
-                        // 判断面板不能大于表格高度
-                        const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                        let left = 0;
+                        let top = 0;
+                        let maxHeight = 0;
+                        if (transfer) {
+                            left = btnRect.left - centerWidth + scrollLeft;
+                            top = btnRect.top + btnElem.clientHeight + scrollTop;
+                            maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
+                            if (left < 16) {
+                                left = 16;
+                            }
+                            else if (left > (visibleWidth - filterWidth - 16)) {
+                                left = visibleWidth - filterWidth - 16;
+                            }
+                        }
+                        else {
+                            left = btnRect.left - tableRect.left - centerWidth;
+                            top = btnRect.top - tableRect.top + btnElem.clientHeight;
+                            maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                            if (left < 1) {
+                                left = 1;
+                            }
+                            else if (left > (el.clientWidth - filterWidth - 1)) {
+                                left = el.clientWidth - filterWidth - 1;
+                            }
+                        }
                         filterStore.style = {
                             top: toCssUnit(top),
                             left: toCssUnit(left)
                         };
+                        // 判断面板不能大于表格高度
                         filterStore.maxHeight = maxHeight;
                     });
                 }

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

@@ -1,18 +1,30 @@
-import { defineComponent, h, computed, inject } from 'vue';
+import { defineComponent, h, ref, computed, inject, Teleport } from 'vue';
 import { VxeUI } from '../../../ui';
 import { formatText, isEnableConf } from '../../../ui/src/utils';
 import { getPropClass } from '../../../ui/src/dom';
 import { getSlotVNs } from '../../../ui/src/vn';
+import XEUtils from 'xe-utils';
 const { getI18n, getIcon, renderer } = VxeUI;
 export default defineComponent({
     name: 'VxeTableFilterPanel',
     props: {
         filterStore: Object
     },
-    setup(props) {
+    setup(props, context) {
+        const xID = XEUtils.uniqueId();
         const $xeTable = inject('$xeTable', {});
         const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable;
         const { computeFilterOpts } = getComputeMaps();
+        const refElem = ref();
+        const refMaps = {
+            refElem
+        };
+        const $xeFilterPanel = {
+            xID,
+            props,
+            context,
+            getRefMaps: () => refMaps
+        };
         const computeHasCheckOption = computed(() => {
             const { filterStore } = props;
             return filterStore && filterStore.options.some((option) => option.checked);
@@ -66,7 +78,7 @@ export default defineComponent({
         /*************************
          * Publish methods
          *************************/
-        const $panel = {
+        const filterPanelMethods = {
             changeRadioOption,
             changeMultipleOption,
             changeAllOption,
@@ -74,12 +86,13 @@ export default defineComponent({
             confirmFilter,
             resetFilter
         };
+        Object.assign($xeFilterPanel, filterPanelMethods);
         const renderOptions = (filterRender, compConf) => {
             const { filterStore } = props;
             const { column, multiple, maxHeight } = filterStore;
             const slots = column ? column.slots : null;
             const filterSlot = slots ? slots.filter : null;
-            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable });
+            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
             const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null;
             if (filterSlot) {
                 return [
@@ -198,23 +211,37 @@ export default defineComponent({
             const filterRender = column ? column.filterRender : null;
             const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
             const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : '';
-            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable });
+            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
+            const tableProps = $xeTable.props;
+            const { computeSize } = $xeTable.getComputeMaps();
+            const vSize = computeSize.value;
             const filterOpts = computeFilterOpts.value;
-            const { destroyOnClose } = filterOpts;
-            return h('div', {
-                class: [
-                    'vxe-table--filter-wrapper',
-                    'filter--prevent-default',
-                    getPropClass(filterClassName, params),
-                    {
-                        'is--animat': $xeTable.props.animat,
-                        'is--multiple': multiple,
-                        'is--active': visible
-                    }
-                ],
-                style: filterStore.style
-            }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : []);
+            const { transfer, destroyOnClose } = filterOpts;
+            return h(Teleport, {
+                to: 'body',
+                disabled: !transfer
+            }, [
+                h('div', {
+                    ref: refElem,
+                    class: [
+                        'vxe-table--filter-wrapper',
+                        'filter--prevent-default',
+                        getPropClass(filterClassName, params),
+                        {
+                            [`size--${vSize}`]: vSize,
+                            'is--animat': tableProps.animat,
+                            'is--multiple': multiple,
+                            'is--active': visible
+                        }
+                    ],
+                    style: filterStore.style
+                }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+            ]);
         };
-        return renderVN;
+        $xeFilterPanel.renderVN = renderVN;
+        return $xeFilterPanel;
+    },
+    render() {
+        return this.renderVN();
     }
 });

package/es/table/module/menu/hook.js

@@ -225,7 +225,7 @@ hooks.add('tableMenuModule', {
                         }
                     }
                 }
-                if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
+                if (tableFilter && !getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value).flag) {
                     $xeTable.closeFilter();
                 }
                 menuMethods.closeMenu();

package/es/table/src/table.js

@@ -237,6 +237,7 @@ export default defineComponent({
             mergeBodyFlag: 1,
             mergeFootFlag: 1,
             rowHeightStore: {
+                large: 52,
                 default: 48,
                 medium: 44,
                 small: 40,
@@ -2832,7 +2833,12 @@ export default defineComponent({
                 $xeTable.checkSelectionStatus();
                 return new Promise(resolve => {
                     nextTick()
-                        .then(() => $xeTable.recalculate())
+                        .then(() => handleRecalculateLayout(false))
+                        .then(() => {
+                        calcCellHeight();
+                        updateRowOffsetTop();
+                        return handleRecalculateLayout(false);
+                    })
                         .then(() => {
                         let targetScrollLeft = lastScrollLeft;
                         let targetScrollTop = lastScrollTop;
@@ -2846,8 +2852,7 @@ export default defineComponent({
                             targetScrollTop = 0;
                         }
                         reactData.isRowLoading = false;
-                        calcCellHeight();
-                        updateRowOffsetTop();
+                        handleRecalculateLayout(false);
                         // 是否变更虚拟滚动
                         if (oldScrollYLoad === sYLoad) {
                             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -5276,12 +5281,10 @@ export default defineComponent({
             closeFilter() {
                 const { filterStore } = reactData;
                 const { column, visible } = filterStore;
-                Object.assign(filterStore, {
-                    isAllSelected: false,
-                    isIndeterminate: false,
-                    options: [],
-                    visible: false
-                });
+                filterStore.isAllSelected = false;
+                filterStore.isIndeterminate = false;
+                filterStore.options = [];
+                filterStore.visible = false;
                 if (visible) {
                     dispatchEvent('filter-visible', {
                         column,
@@ -6037,7 +6040,7 @@ export default defineComponent({
                 if (getEventTargetNode(evnt, el, 'vxe-cell--filter').flag) {
                     // 如果点击了筛选按钮
                 }
-                else if (getEventTargetNode(evnt, tableFilter.$el).flag) {
+                else if (getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value).flag) {
                     // 如果点击筛选容器
                 }
                 else {
@@ -8132,6 +8135,10 @@ export default defineComponent({
                 const currentColumnOpts = computeCurrentColumnOpts.value;
                 const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod;
                 const { column: newValue } = params;
+                const { trigger } = currentColumnOpts;
+                if (trigger === 'manual') {
+                    return;
+                }
                 const isChange = oldValue !== newValue;
                 if (!beforeRowMethod || beforeRowMethod({ column: newValue, $table: $xeTable })) {
                     $xeTable.setCurrentColumn(newValue);
@@ -8149,6 +8156,10 @@ export default defineComponent({
                 const currentRowOpts = computeCurrentRowOpts.value;
                 const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod;
                 const { row: newValue } = params;
+                const { trigger } = currentRowOpts;
+                if (trigger === 'manual') {
+                    return;
+                }
                 const isChange = oldValue !== newValue;
                 if (!beforeRowMethod || beforeRowMethod({ row: newValue, $table: $xeTable })) {
                     $xeTable.setCurrentRow(newValue);
@@ -8196,10 +8207,10 @@ export default defineComponent({
              * 展开树节点事件
              */
             triggerTreeExpandEvent(evnt, params) {
-                const { treeExpandLazyLoadedMaps } = internalData;
+                const { treeExpandLazyLoadedMaps, treeEATime } = internalData;
                 const treeOpts = computeTreeOpts.value;
                 const { row, column } = params;
-                const { lazy, trigger } = treeOpts;
+                const { lazy, trigger, accordion } = treeOpts;
                 if (trigger === 'manual') {
                     return;
                 }
@@ -8209,7 +8220,17 @@ export default defineComponent({
                     const expanded = !$xeTable.isTreeExpandByRow(row);
                     const columnIndex = $xeTable.getColumnIndex(column);
                     const $columnIndex = $xeTable.getVMColumnIndex(column);
-                    $xeTable.setTreeExpand(row, expanded);
+                    if (treeEATime) {
+                        clearTimeout(treeEATime);
+                    }
+                    $xeTable.setTreeExpand(row, expanded).then(() => {
+                        if (accordion) {
+                            internalData.treeEATime = setTimeout(() => {
+                                internalData.treeEATime = undefined;
+                                $xeTable.scrollToRow(row);
+                            }, 20);
+                        }
+                    });
                     dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt);
                 }
             },
@@ -9011,6 +9032,9 @@ export default defineComponent({
                     direction }, params);
                 updateRowExpandStyle();
                 checkLastSyncScroll(isRollX, isRollY);
+                if (isRollX) {
+                    $xeTable.closeFilter();
+                }
                 if (rowOpts.isHover || highlightHoverRow) {
                     $xeTable.clearHoverRow();
                 }
@@ -9456,7 +9480,8 @@ export default defineComponent({
                     if (isScrollXBig && mouseOpts.area) {
                         errLog('vxe.error.notProp', ['mouse-config.area']);
                     }
-                    nextTick(() => {
+                    calcScrollbar();
+                    return nextTick().then(() => {
                         updateStyle();
                     });
                 }
@@ -9553,6 +9578,7 @@ export default defineComponent({
                 if (isScrollYBig && mouseOpts.area) {
                     errLog('vxe.error.notProp', ['mouse-config.area']);
                 }
+                calcScrollbar();
                 return nextTick().then(() => {
                     updateStyle();
                 });
@@ -10432,8 +10458,6 @@ export default defineComponent({
             if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
                 initTpImg();
             }
-            ;
-            window.aa = $xeTable;
             nextTick(() => {
                 const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props;
                 const { scrollXStore, scrollYStore } = internalData;

package/es/table/src/util.js

@@ -351,7 +351,8 @@ export function getRootColumn($xeTable, column) {
 const lineOffsetSizes = {
     mini: 3,
     small: 2,
-    medium: 1
+    medium: 1,
+    large: 0
 };
 const countTreeExpand = (prevRow, params) => {
     let count = 1;

package/es/table/style.css

@@ -1467,9 +1467,11 @@
   position: absolute;
   top: 0;
   min-width: 100px;
+  font-size: var(--vxe-ui-font-size-default);
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
+  color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
 }
@@ -1579,6 +1581,16 @@
   vertical-align: middle;
 }
 
+.vxe-table--filter-wrapper.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-table--filter-wrapper.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-table--filter-wrapper.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}
+
 .vxe-table--context-menu-wrapper {
   display: none;
 }
@@ -2997,6 +3009,9 @@
           user-select: none;
   cursor: pointer;
 }
+.vxe-table--render-default .vxe-tree--btn-wrapper > i {
+  background-color: var(--vxe-ui-layout-background-color);
+}
 .vxe-table--render-default .vxe-tree--node-btn {
   display: block;
   color: var(--vxe-ui-font-lighten-color);
@@ -3017,6 +3032,9 @@
 .vxe-table--render-default .vxe-body--column.col--cs-height, .vxe-table--render-default .vxe-body--column.col--rs-height, .vxe-table--render-default .vxe-body--column.col--auto-height {
   overflow: hidden;
 }
+.vxe-table--render-default .vxe-body--column.col--cs-height.col--tree-node, .vxe-table--render-default .vxe-body--column.col--rs-height.col--tree-node, .vxe-table--render-default .vxe-body--column.col--auto-height.col--tree-node {
+  overflow: unset;
+}
 .vxe-table--render-default .vxe-body--column.col--cs-height > .vxe-cell, .vxe-table--render-default .vxe-body--column.col--rs-height > .vxe-cell, .vxe-table--render-default .vxe-body--column.col--auto-height > .vxe-cell {
   overflow: hidden;
 }