vxe-table 3.15.1 → 3.15.2

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

@@ -1,7 +1,7 @@
 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 } = VxeUI;
 export default {
@@ -71,6 +71,9 @@ export default {
                 }
                 else {
                     const el = $xeTable.$refs.refElem;
+                    const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
+                    const filterOpts = $xeTable.computeFilterOpts;
+                    const { transfer } = filterOpts;
                     const tableRect = el.getBoundingClientRect();
                     const btnElem = evnt.currentTarget;
                     const { filters, filterMultiple, filterRender } = column;
@@ -107,24 +110,40 @@ export default {
                             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;
-                        let 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);
-                        if (left < 1) {
-                            left = 1;
+                        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 if (left > (el.clientWidth - filterWidth - 1)) {
-                            left = el.clientWidth - filterWidth - 1;
+                        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,180 +1,211 @@
 import { VxeUI } from '../../../ui';
 import { formatText, isEnableConf, getClass } from '../../../ui/src/utils';
 import { getSlotVNs } from '../../../ui/src/vn';
-const { getI18n, getIcon, renderer } = VxeUI;
+const { getI18n, getIcon, renderer, globalMixins } = VxeUI;
+function renderOptions($xeFilterPanel, h, filterRender, compConf) {
+    const props = $xeFilterPanel;
+    const $xeTable = $xeFilterPanel.$xeTable;
+    const tableInternalData = $xeTable;
+    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: $xeFilterPanel, $table: $xeTable });
+    const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null;
+    if (filterSlot) {
+        return [
+            h('div', {
+                class: 'vxe-table--filter-template',
+                style: maxHeight
+                    ? {
+                        maxHeight: `${maxHeight}px`
+                    }
+                    : {}
+            }, $xeTable.callSlot(filterSlot, params, h))
+        ];
+    }
+    else if (rtFilter) {
+        return [
+            h('div', {
+                class: 'vxe-table--filter-template',
+                style: maxHeight
+                    ? {
+                        maxHeight: `${maxHeight}px`
+                    }
+                    : {}
+            }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
+        ];
+    }
+    const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item) => item._checked);
+    const isAllIndeterminate = multiple && filterStore.isIndeterminate;
+    return [
+        h('ul', {
+            class: 'vxe-table--filter-header'
+        }, [
+            h('li', {
+                class: ['vxe-table--filter-option', {
+                        'is--checked': isAllChecked,
+                        'is--indeterminate': isAllIndeterminate
+                    }],
+                attrs: {
+                    title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+                },
+                on: {
+                    click: (evnt) => {
+                        $xeFilterPanel.changeAllOption(evnt, !filterStore.isAllSelected);
+                    }
+                }
+            }, (multiple
+                ? [
+                    h('span', {
+                        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                    })
+                ]
+                : []).concat([
+                h('span', {
+                    class: 'vxe-checkbox--label'
+                }, getI18n('vxe.table.allFilter'))
+            ]))
+        ]),
+        h('ul', {
+            class: 'vxe-table--filter-body',
+            style: maxHeight
+                ? {
+                    maxHeight: `${maxHeight}px`
+                }
+                : {}
+        }, filterStore.options.map((item) => {
+            const isChecked = item._checked;
+            const isIndeterminate = false;
+            return h('li', {
+                class: ['vxe-table--filter-option', {
+                        'is--checked': isChecked
+                    }],
+                attrs: {
+                    title: item.label
+                },
+                on: {
+                    click: (evnt) => {
+                        $xeFilterPanel.changeOption(evnt, !item._checked, item);
+                    }
+                }
+            }, (multiple
+                ? [
+                    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))
+            ]));
+        }))
+    ];
+}
+function renderFooter($xeFilterPanel, h) {
+    const props = $xeFilterPanel;
+    const $xeTable = $xeFilterPanel.$xeTable;
+    const { filterStore } = props;
+    const { column, multiple } = filterStore;
+    const filterOpts = $xeTable.computeFilterOpts;
+    const hasCheckOption = $xeFilterPanel.computeHasCheckOption;
+    const filterRender = column.filterRender;
+    const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+    const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
+    return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
+        ? [
+            h('div', {
+                class: 'vxe-table--filter-footer'
+            }, [
+                h('button', {
+                    class: {
+                        'is--disabled': isDisabled
+                    },
+                    attrs: {
+                        disabled: isDisabled
+                    },
+                    on: {
+                        click: $xeFilterPanel.confirmFilter
+                    }
+                }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
+                h('button', {
+                    on: {
+                        click: $xeFilterPanel.resetFilter
+                    }
+                }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
+            ])
+        ]
+        : [];
+}
 export default {
     name: 'VxeTableFilterPanel',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
     props: {
         filterStore: Object
     },
+    inject: {
+        $xeTable: {
+            default: null
+        }
+    },
     computed: {
-        hasCheckOption() {
+        computeHasCheckOption() {
             const { filterStore } = this;
             return filterStore && filterStore.options.some((option) => option.checked);
         }
     },
+    mounted() {
+        const $xeFilterPanel = this;
+        const $xeTable = $xeFilterPanel.$xeTable;
+        const filterOpts = $xeTable.computeFilterOpts;
+        const { transfer } = filterOpts;
+        const el = this.$refs.refElem;
+        if (transfer && el) {
+            document.body.appendChild(el);
+        }
+    },
+    beforeDestroy() {
+        const el = this.$refs.refElem;
+        if (el && el.parentNode) {
+            el.parentNode.removeChild(el);
+        }
+    },
     render(h) {
-        const $panel = this;
-        const $xeTable = this.$parent;
+        const $xeFilterPanel = this;
+        const props = $xeFilterPanel;
+        const $xeTable = $xeFilterPanel.$xeTable;
         const tableInternalData = $xeTable;
-        const { filterStore } = this;
+        const { filterStore } = props;
         const { visible, multiple, column } = filterStore;
         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;
+        const vSize = $xeFilterPanel.computeSize;
         const filterOpts = $xeTable.computeFilterOpts;
         const { destroyOnClose } = filterOpts;
         return h('div', {
+            ref: 'refElem',
             class: [
                 'vxe-table--filter-wrapper',
                 'filter--prevent-default',
                 compConf && compConf.className ? compConf.className : '',
                 getClass(filterClassName, params),
                 {
-                    'is--animat': $xeTable.animat,
+                    [`size--${vSize}`]: vSize,
+                    'is--animat': tableProps.animat,
                     'is--multiple': multiple,
                     'is--active': visible
                 }
             ],
             style: filterStore.style
-        }, filterStore.visible && (destroyOnClose ? visible : true) && column ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : []);
+        }, filterStore.visible && (destroyOnClose ? visible : true) && column ? renderOptions($xeFilterPanel, h, filterRender, compConf).concat(renderFooter($xeFilterPanel, h)) : []);
     },
     methods: {
-        renderOptions(h, filterRender, compConf) {
-            const $panel = this;
-            const $xeTable = this.$parent;
-            const tableInternalData = $xeTable;
-            const { filterStore } = this;
-            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 rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null;
-            if (filterSlot) {
-                return [
-                    h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: `${maxHeight}px`
-                            }
-                            : {}
-                    }, $xeTable.callSlot(filterSlot, params, h))
-                ];
-            }
-            else if (rtFilter) {
-                return [
-                    h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: `${maxHeight}px`
-                            }
-                            : {}
-                    }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
-                ];
-            }
-            const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item) => item._checked);
-            const isAllIndeterminate = multiple && filterStore.isIndeterminate;
-            return [
-                h('ul', {
-                    class: 'vxe-table--filter-header'
-                }, [
-                    h('li', {
-                        class: ['vxe-table--filter-option', {
-                                'is--checked': isAllChecked,
-                                'is--indeterminate': isAllIndeterminate
-                            }],
-                        attrs: {
-                            title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
-                        },
-                        on: {
-                            click: (evnt) => {
-                                this.changeAllOption(evnt, !filterStore.isAllSelected);
-                            }
-                        }
-                    }, (multiple
-                        ? [
-                            h('span', {
-                                class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                            })
-                        ]
-                        : []).concat([
-                        h('span', {
-                            class: 'vxe-checkbox--label'
-                        }, getI18n('vxe.table.allFilter'))
-                    ]))
-                ]),
-                h('ul', {
-                    class: 'vxe-table--filter-body',
-                    style: maxHeight
-                        ? {
-                            maxHeight: `${maxHeight}px`
-                        }
-                        : {}
-                }, filterStore.options.map((item) => {
-                    const isChecked = item._checked;
-                    const isIndeterminate = false;
-                    return h('li', {
-                        class: ['vxe-table--filter-option', {
-                                'is--checked': isChecked
-                            }],
-                        attrs: {
-                            title: item.label
-                        },
-                        on: {
-                            click: (evnt) => {
-                                this.changeOption(evnt, !item._checked, item);
-                            }
-                        }
-                    }, (multiple
-                        ? [
-                            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))
-                    ]));
-                }))
-            ];
-        },
-        renderFooter(h) {
-            const $xeTable = this.$parent;
-            const { hasCheckOption, filterStore } = this;
-            const { column, multiple } = filterStore;
-            const filterOpts = $xeTable.computeFilterOpts;
-            const filterRender = column.filterRender;
-            const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
-            const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
-            return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
-                ? [
-                    h('div', {
-                        class: 'vxe-table--filter-footer'
-                    }, [
-                        h('button', {
-                            class: {
-                                'is--disabled': isDisabled
-                            },
-                            attrs: {
-                                disabled: isDisabled
-                            },
-                            on: {
-                                click: this.confirmFilter
-                            }
-                        }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
-                        h('button', {
-                            on: {
-                                click: this.resetFilter
-                            }
-                        }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
-                    ])
-                ]
-                : [];
-        },
         // 全部筛选事件
         filterCheckAllEvent(evnt, value) {
             const filterStore = this.filterStore;

package/es/table/src/methods.js

@@ -2872,7 +2872,12 @@ const Methods = {
             $xeTable.checkSelectionStatus();
             return new Promise(resolve => {
                 this.$nextTick()
-                    .then(() => $xeTable.recalculate())
+                    .then(() => handleRecalculateLayout($xeTable, false))
+                    .then(() => {
+                    calcCellHeight($xeTable);
+                    updateRowOffsetTop($xeTable);
+                    return handleRecalculateLayout($xeTable, false);
+                })
                     .then(() => {
                     let targetScrollLeft = lastScrollLeft;
                     let targetScrollTop = lastScrollTop;
@@ -2886,8 +2891,7 @@ const Methods = {
                         targetScrollTop = 0;
                     }
                     reactData.isRowLoading = false;
-                    calcCellHeight($xeTable);
-                    updateRowOffsetTop($xeTable);
+                    handleRecalculateLayout($xeTable, false);
                     // 是否变更虚拟滚动
                     if (oldScrollYLoad === sYLoad) {
                         restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -6459,6 +6463,10 @@ const Methods = {
         const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
         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);
@@ -6478,6 +6486,10 @@ const Methods = {
         const currentRowOpts = $xeTable.computeCurrentRowOpts;
         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);
@@ -8188,10 +8200,10 @@ const Methods = {
     triggerTreeExpandEvent(evnt, params) {
         const $xeTable = this;
         const internalData = $xeTable;
-        const { treeExpandLazyLoadedMaps } = internalData;
+        const { treeExpandLazyLoadedMaps, treeEATime } = internalData;
         const treeOpts = $xeTable.computeTreeOpts;
         const { row, column } = params;
-        const { lazy, trigger } = treeOpts;
+        const { lazy, trigger, accordion } = treeOpts;
         if (trigger === 'manual') {
             return;
         }
@@ -8201,7 +8213,17 @@ const Methods = {
             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);
+                }
+            });
             $xeTable.dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt);
         }
     },
@@ -8948,7 +8970,8 @@ const Methods = {
             if (isScrollXBig && mouseOpts.area) {
                 errLog('vxe.error.notProp', ['mouse-config.area']);
             }
-            $xeTable.$nextTick(() => {
+            calcScrollbar($xeTable);
+            return $xeTable.$nextTick(() => {
                 updateStyle($xeTable);
             });
         }
@@ -9057,6 +9080,7 @@ const Methods = {
         if (isScrollYBig && mouseOpts.area) {
             errLog('vxe.error.notProp', ['mouse-config.area']);
         }
+        calcScrollbar($xeTable);
         return $xeTable.$nextTick().then(() => {
             updateStyle($xeTable);
         });

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;
 }