vxe-table 3.13.6 → 3.13.8

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

@@ -1030,7 +1030,7 @@ function handleExportAndPrint($xeTable, options, isPrint) {
         isMerge: hasMerge,
         useStyle: true,
         current: 'current',
-        modes: ['current', 'selected', 'empty'].concat(proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : [])
+        modes: (proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []).concat(['current', 'selected', 'empty'])
     }, options);
     const types = defOpts.types || XEUtils.keys(exportOpts._typeMaps);
     const modes = defOpts.modes || [];
@@ -1206,7 +1206,7 @@ export default {
                 isMerge: hasMerge,
                 useStyle: true,
                 current: 'current',
-                modes: ['current', 'selected', 'empty'].concat(proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []),
+                modes: (proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []).concat(['current', 'selected', 'empty']),
                 download: true,
                 type: 'csv'
                 // filename: '',

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

@@ -1,6 +1,6 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
-import { toFilters, handleFieldOrColumn } from '../../src/util';
+import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util';
 import { getDomNode, triggerEvent } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer } = VxeUI;
@@ -56,93 +56,101 @@ export default {
          * @param {Object} params 参数
          */
         triggerFilterEvent(evnt, column, params) {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
             const { filterStore } = this;
             if (filterStore.column === column && filterStore.visible) {
                 filterStore.visible = false;
             }
             else {
-                const { target: targetElem, pageX } = evnt;
-                const { filters, filterMultiple, filterRender } = column;
-                const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
-                const filterRecoverMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
-                const { visibleWidth } = getDomNode();
-                Object.assign(filterStore, {
-                    args: params,
-                    multiple: filterMultiple,
-                    options: filters,
-                    column,
-                    style: null,
-                    visible: true
-                });
-                // 复原状态
-                filterStore.options.forEach((option) => {
-                    const { _checked, checked } = option;
-                    option._checked = checked;
-                    if (!checked && _checked !== checked) {
-                        if (filterRecoverMethod) {
-                            filterRecoverMethod({ option, column, $table: this });
+                const { initStore, filterStore } = reactData;
+                const { elemStore } = internalData;
+                if (filterStore.column === column && filterStore.visible) {
+                    filterStore.visible = false;
+                }
+                else {
+                    const { clientY, pageX } = evnt;
+                    const el = $xeTable.$refs.refElem;
+                    const tableRect = el.getBoundingClientRect();
+                    const targetElem = evnt.target;
+                    const { visibleWidth } = getDomNode();
+                    const { filters, filterMultiple, filterRender } = column;
+                    const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                    const frMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
+                    internalData._currFilterParams = params;
+                    Object.assign(filterStore, {
+                        multiple: filterMultiple,
+                        options: filters,
+                        column,
+                        style: null
+                    });
+                    // 复原状态
+                    filterStore.options.forEach((option) => {
+                        const { _checked, checked } = option;
+                        option._checked = checked;
+                        if (!checked && _checked !== checked) {
+                            if (frMethod) {
+                                frMethod({ option, column, $table: $xeTable });
+                            }
                         }
-                    }
-                });
-                this.checkFilterOptions();
-                this.initStore.filter = true;
-                this.$nextTick(() => {
-                    const { $refs } = this;
-                    const { refTableHeader, refTableBody, filterWrapper } = $refs;
-                    const bodyElem = refTableBody.$el;
-                    const headerElem = refTableHeader ? refTableHeader.$el : null;
-                    if (!bodyElem) {
-                        return;
-                    }
-                    const filterWrapperElem = filterWrapper.$el;
-                    if (!filterWrapperElem) {
-                        return;
-                    }
-                    const filterWidth = filterWrapperElem.offsetWidth;
-                    const filterHeight = filterWrapperElem.offsetHeight;
-                    const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-                    const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
-                    const centerWidth = filterWidth / 2;
-                    const minMargin = 10;
-                    const maxLeft = bodyElem.clientWidth - filterWidth - minMargin;
-                    let left, right;
-                    const style = {
-                        top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight}px`
-                    };
-                    // 判断面板不能大于表格高度
-                    let maxHeight = null;
-                    const bodyHeight = bodyElem.clientHeight - (headerElem ? headerElem.clientHeight / 2 : 0);
-                    if (filterHeight >= bodyHeight) {
-                        maxHeight = Math.max(40, bodyHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0));
-                    }
-                    if (column.fixed === 'left') {
-                        left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth;
-                    }
-                    else if (column.fixed === 'right') {
-                        right = (targetElem.offsetParent.offsetWidth - targetElem.offsetLeft) + (targetElem.offsetParent.offsetParent.offsetWidth - targetElem.offsetParent.offsetLeft) - column.renderWidth - centerWidth;
-                    }
-                    else {
-                        left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth - bodyElem.scrollLeft;
-                    }
-                    if (left) {
-                        const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
-                        if (overflowWidth > 0) {
-                            left -= overflowWidth;
+                    });
+                    this.checkFilterOptions();
+                    filterStore.visible = true;
+                    initStore.filter = true;
+                    $xeTable.$nextTick(() => {
+                        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+                        if (!headerScrollElem) {
+                            return;
                         }
-                        style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
-                    }
-                    else if (right) {
-                        const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
-                        if (overflowWidth > 0) {
-                            right += overflowWidth;
+                        const tableFilter = $xeTable.$refs.refTableFilter;
+                        const filterWrapperElem = tableFilter ? tableFilter.$el : null;
+                        if (!filterWrapperElem) {
+                            return;
                         }
-                        style.right = `${Math.max(minMargin, right)}px`;
-                    }
-                    filterStore.style = style;
-                    filterStore.maxHeight = maxHeight;
-                });
+                        const filterWidth = filterWrapperElem.offsetWidth;
+                        const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
+                        const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+                        const centerWidth = filterWidth / 2;
+                        const minMargin = 10;
+                        const maxLeft = el.clientWidth - filterWidth - minMargin;
+                        let left, right;
+                        const thEl = targetElem.offsetParent;
+                        const trEl = thEl.offsetParent;
+                        const style = {
+                            top: `${targetElem.offsetTop + thEl.offsetTop + targetElem.offsetHeight}px`
+                        };
+                        // 判断面板不能大于表格高度
+                        const maxHeight = Math.max(40, el.clientHeight - (clientY - tableRect.y) - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                        if (column.fixed === 'left') {
+                            left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth;
+                        }
+                        else if (column.fixed === 'right') {
+                            right = (thEl.offsetWidth - targetElem.offsetLeft) + (trEl.offsetWidth - trEl.offsetLeft) - column.renderWidth - centerWidth;
+                        }
+                        else {
+                            left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth - headerScrollElem.scrollLeft;
+                        }
+                        if (left) {
+                            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
+                            if (overflowWidth > 0) {
+                                left -= overflowWidth;
+                            }
+                            style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
+                        }
+                        else if (right) {
+                            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
+                            if (overflowWidth > 0) {
+                                right += overflowWidth;
+                            }
+                            style.right = `${Math.max(minMargin, right)}px`;
+                        }
+                        filterStore.style = style;
+                        filterStore.maxHeight = maxHeight;
+                    });
+                }
+                $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt);
             }
-            this.emitEvent('filter-visible', { column, field: column.field, property: column.field, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt);
         },
         handleFilterConfirmFilter(evnt) {
             const $xeTable = this;

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

@@ -61,6 +61,7 @@ export default {
             const internalData = $xeTable;
             const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this;
             const { selected } = editStore;
+            const tableFilter = $xeTable.$refs.refTableFilter;
             const layoutList = ['header', 'body', 'footer'];
             if (isEnableConf(menuConfig) || contextMenu) {
                 if (ctxMenuStore.visible && $refs.refTableMenu && getEventTargetNode(evnt, $refs.refTableMenu.$el).flag) {
@@ -133,7 +134,7 @@ export default {
                     }
                 }
             }
-            if ($refs.filterWrapper && !getEventTargetNode(evnt, $refs.filterWrapper.$el).flag) {
+            if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
                 this.closeFilter();
             }
             this.closeMenu();

package/es/table/src/methods.js

@@ -4518,13 +4518,15 @@ const Methods = {
     handleGlobalMousedownEvent(evnt) {
         const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, areaOpts, filterStore, customStore, getRowNode } = this;
         const { actived } = editStore;
-        const { refTableMenu, filterWrapper, customWrapper, refValidTooltip } = $refs;
+        const { customWrapper, refValidTooltip } = $refs;
+        const tableFilter = $refs.refTableFilter;
+        const tableMenu = $refs.refTableMenu;
         // 筛选
-        if (filterWrapper) {
+        if (tableFilter) {
             if (getEventTargetNode(evnt, $el, 'vxe-cell--filter').flag) {
                 // 如果点击了筛选按钮
             }
-            else if (getEventTargetNode(evnt, filterWrapper.$el).flag) {
+            else if (getEventTargetNode(evnt, tableFilter.$el).flag) {
                 // 如果点击筛选容器
             }
             else {
@@ -4604,7 +4606,7 @@ const Methods = {
             }
         }
         else if (mouseConfig) {
-            if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(refTableMenu && getEventTargetNode(evnt, refTableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
+            if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
                 if (this.clearSelected) {
                     this.clearSelected();
                 }
@@ -4623,7 +4625,7 @@ const Methods = {
             }
         }
         // 如果配置了快捷菜单且，点击了其他地方则关闭
-        if (ctxMenuStore.visible && refTableMenu && !getEventTargetNode(evnt, refTableMenu.$el).flag) {
+        if (ctxMenuStore.visible && tableMenu && !getEventTargetNode(evnt, tableMenu.$el).flag) {
             this.closeMenu();
         }
         const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag;
@@ -5948,7 +5950,7 @@ const Methods = {
         const rowid = getRowid(this, row);
         this.clearHoverRow();
         if ($el) {
-            XEUtils.arrayEach($el.querySelectorAll(`[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'));
+            XEUtils.arrayEach($el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'));
         }
         this.hoverRow = row;
     },

package/es/table/src/table.js

@@ -1749,7 +1749,7 @@ export default {
             initStore.filter
                 ? h(TableFilterPanelComponent, {
                     key: 'tf',
-                    ref: 'filterWrapper',
+                    ref: 'refTableFilter',
                     props: {
                         filterStore
                     }

package/es/table/style.css

@@ -2211,15 +2211,6 @@
 .vxe-table .vxe-table--header-wrapper {
   color: var(--vxe-ui-table-header-font-color);
 }
-.vxe-table .vxe-table--header-wrapper::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: 0;
-  width: 100%;
-  border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-}
 .vxe-table .vxe-cell--sort {
   text-align: center;
   position: relative;
@@ -2467,11 +2458,6 @@
 .vxe-table--render-default.column--highlight .vxe-header--column:not(.col--seq):hover {
   background-color: var(--vxe-ui-table-column-hover-background-color);
 }
-.vxe-table--render-default.header-cell--area .vxe-table--header-wrapper {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
 .vxe-table--render-default.body-cell--area .vxe-table--body-wrapper {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2654,9 +2640,6 @@
 .vxe-table--render-default.border--none .vxe-table--border-line {
   display: none;
 }
-.vxe-table--render-default.border--none .vxe-table--header-wrapper::after {
-  display: none;
-}
 .vxe-table--render-default.size--medium {
   font-size: var(--vxe-ui-font-size-medium);
 }