vxe-table 3.15.1 → 3.15.3

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/body.js

@@ -62,7 +62,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     const $xeGrid = $xeTable.$xeGrid;
-    const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
+    const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
     const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData;
     const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore } = tableInternalData;
     const cellOpts = $xeTable.computeCellOpts;
@@ -70,6 +70,8 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const checkboxOpts = $xeTable.computeCheckboxOpts;
     const editOpts = $xeTable.computeEditOpts;
     const tooltipOpts = $xeTable.computeTooltipOpts;
+    const virtualXOpts = $xeTable.computeVirtualXOpts;
+    const virtualYOpts = $xeTable.computeVirtualYOpts;
     const { isAllColumnDrag, isAllRowDrag } = $xeTable.resizableOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const rowDragOpts = $xeTable.computeRowDragOpts;
@@ -238,10 +240,10 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     let isVNPreEmptyStatus = false;
     if (!isMergeCell) {
         if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-            if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+            if (scrollYLoad && !treeConfig && !virtualYOpts.immediate && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
                 isVNPreEmptyStatus = true;
             }
-            else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            else if (scrollXLoad && !virtualXOpts.immediate && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                 isVNPreEmptyStatus = true;
             }
         }

package/es/table/src/footer.js

@@ -16,8 +16,10 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
     const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
     const { scrollXLoad, scrollYLoad, overflowX, currentColumn } = tableReactData;
     const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData;
+    const virtualXOpts = $xeTable.computeVirtualXOpts;
     const tooltipOpts = $xeTable.computeTooltipOpts;
-    const { isAllColumnDrag } = $xeTable.resizableOpts;
+    const resizableOpts = $xeTable.resizableOpts;
+    const { isAllColumnDrag } = resizableOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const cellOpts = $xeTable.computeCellOpts;
@@ -125,7 +127,7 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
         let isVNPreEmptyStatus = false;
         if (!isMergeCell) {
-            if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+            if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                 isVNPreEmptyStatus = true;
             }
         }

package/es/table/src/header.js

@@ -15,6 +15,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
     const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData;
     const { fullColumnIdData, scrollXStore } = tableInternalData;
+    const virtualXOpts = $xeTable.computeVirtualXOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const cellOpts = $xeTable.computeCellOpts;
@@ -84,7 +85,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         let isVNPreEmptyStatus = false;
         if (!isGroup) {
             if (!dragCol || dragCol.id !== colid) {
-                if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                     isVNPreEmptyStatus = true;
                 }
             }