vxe-table 3.14.0-beta.8 → 3.14.0

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

@@ -89,6 +89,7 @@ const renderSimplePanel = (h, _vm) => {
     const props = _vm;
     const $xeTable = _vm.$xeTable;
     const reactData = $xeTable;
+    const $xeGrid = $xeTable.$xeGrid;
     const { customStore } = props;
     const { isCustomStatus, customColumnList } = reactData;
     const customOpts = $xeTable.computeCustomOpts;
@@ -115,7 +116,7 @@ const renderSimplePanel = (h, _vm) => {
     }
     const params = {
         $table: $xeTable,
-        $grid: $xeTable.xegrid,
+        $grid: $xeGrid,
         columns: customColumnList,
         isAllChecked,
         isAllIndeterminate,
@@ -253,7 +254,7 @@ const renderSimplePanel = (h, _vm) => {
         class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
                 'is--active': customStore.visible
             }],
-        style: maxHeight && !['left', 'right'].includes(placement)
+        style: maxHeight && !['left', 'right'].includes(placement || '')
             ? {
                 maxHeight: `${maxHeight}px`
             }
@@ -391,6 +392,7 @@ const renderPopupPanel = (h, _vm) => {
     const $xeTable = _vm.$xeTable;
     const tableProps = $xeTable;
     const reactData = $xeTable;
+    const $xeGrid = $xeTable.$xeGrid;
     const { customStore } = props;
     const { resizable: allResizable } = tableProps;
     const { isCustomStatus, customColumnList } = reactData;
@@ -417,7 +419,7 @@ const renderPopupPanel = (h, _vm) => {
     const isAllIndeterminate = customStore.isIndeterminate;
     const params = {
         $table: $xeTable,
-        $grid: $xeTable.xegrid,
+        $grid: $xeGrid,
         columns: customColumnList,
         isAllChecked,
         isAllIndeterminate,
@@ -802,9 +804,6 @@ export default {
     inject: {
         $xeTable: {
             default: null
-        },
-        $xetable: {
-            default: null
         }
     },
     data() {
@@ -822,8 +821,8 @@ export default {
         const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput');
         const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup');
         this.$nextTick(() => {
-            const { $xetable } = this;
-            const { customOpts } = $xetable;
+            const $xeTable = this.$xeTable;
+            const { customOpts } = $xeTable;
             const { mode } = customOpts;
             if (!VxeUIModalComponent) {
                 errLog('vxe.error.reqComp', ['vxe-modal']);
@@ -852,16 +851,18 @@ export default {
     },
     methods: {
         handleWrapperMouseenterEvent(evnt) {
-            const { $xetable, customStore } = this;
+            const $xeTable = this.$xeTable;
+            const { customStore } = this;
             customStore.activeWrapper = true;
-            $xetable.customOpenEvent(evnt);
+            $xeTable.customOpenEvent(evnt);
         },
         handleWrapperMouseleaveEvent(evnt) {
-            const { $xetable, customStore } = this;
+            const $xeTable = this.$xeTable;
+            const { customStore } = this;
             customStore.activeWrapper = false;
             setTimeout(() => {
                 if (!customStore.activeBtn && !customStore.activeWrapper) {
-                    $xetable.customCloseEvent(evnt);
+                    $xeTable.customCloseEvent(evnt);
                 }
             }, 300);
         },
@@ -888,10 +889,10 @@ export default {
             $xeTable.emitCustomEvent('cancel', $event);
         },
         handleResetCustomEvent(evnt) {
-            const { $xetable } = this;
-            $xetable.resetCustom(true);
-            $xetable.closeCustom();
-            $xetable.emitCustomEvent('reset', evnt);
+            const $xeTable = this.$xeTable;
+            $xeTable.resetCustom(true);
+            $xeTable.closeCustom();
+            $xeTable.emitCustomEvent('reset', evnt);
         },
         resetCustomEvent(evnt) {
             if (VxeUI.modal) {
@@ -964,7 +965,7 @@ export default {
             $xeTable.checkCustomStatus();
         },
         changeColumnWidth(column) {
-            const $xeTable = this.$xetable;
+            const $xeTable = this.$xeTable;
             const reactData = $xeTable;
             const customOpts = $xeTable.computeCustomOpts;
             if (customOpts.immediate) {
@@ -978,7 +979,7 @@ export default {
             }
         },
         changeFixedOption(column, colFixed) {
-            const $xeTable = this.$xetable;
+            const $xeTable = this.$xeTable;
             const reactData = $xeTable;
             const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
             const customOpts = $xeTable.computeCustomOpts;
@@ -1017,11 +1018,11 @@ export default {
             }
         },
         allOptionEvent() {
-            const { $xetable } = this;
-            $xetable.toggleCustomAllCheckbox();
+            const $xeTable = this.$xeTable;
+            $xeTable.toggleCustomAllCheckbox();
         },
         sortMousedownEvent(evnt) {
-            const $xeTable = this.$xetable;
+            const $xeTable = this.$xeTable;
             const btnEl = evnt.currentTarget;
             const cellEl = btnEl.parentElement;
             const tdEl = cellEl.parentElement;
@@ -1048,7 +1049,7 @@ export default {
             }
         },
         sortDragendEvent(evnt) {
-            const $xeTable = this.$xetable;
+            const $xeTable = this.$xeTable;
             const tableProps = $xeTable;
             const reactData = $xeTable;
             const internalData = $xeTable;
@@ -1222,7 +1223,7 @@ export default {
             removeClass(trEl, 'active--drag-origin');
         },
         sortDragoverEvent(evnt) {
-            const $xeTable = this.$xetable;
+            const $xeTable = this.$xeTable;
             const { dragCol } = this;
             const customOpts = $xeTable.computeCustomOpts;
             const { immediate } = customOpts;

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

@@ -318,6 +318,7 @@ function handleClearEdit($xeTable, evnt, targetRow) {
 function handleEditActive($xeTable, params, evnt, isFocus, isPos) {
     const props = $xeTable;
     const reactData = $xeTable;
+    const $xeGrid = $xeTable.$xeGrid;
     const { editConfig, mouseConfig } = props;
     const { editStore, tableColumn } = reactData;
     const editOpts = $xeTable.computeEditOpts;
@@ -334,7 +335,7 @@ function handleEditActive($xeTable, params, evnt, isFocus, isPos) {
             if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
                 // 判断是否禁用编辑
                 let type = 'edit-disabled';
-                if (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeTable.xegrid }))) {
+                if (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeGrid }))) {
                     if (mouseConfig) {
                         $xeTable.clearSelected();
                         if ($xeTable.clearCellAreas) {
@@ -363,7 +364,7 @@ function handleEditActive($xeTable, params, evnt, isFocus, isPos) {
                             $xeTable.handleFocus(params, evnt);
                         }
                         if (afterEditMethod) {
-                            afterEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeTable.xegrid }));
+                            afterEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeGrid }));
                         }
                     });
                 }
@@ -491,13 +492,14 @@ export default {
             const reactData = $xeTable;
             const internalData = $xeTable;
             const { treeConfig } = props;
-            const { mergeList, editStore, selectCheckboxMaps } = reactData;
-            const { tableFullTreeData, afterFullData, tableFullData } = internalData;
+            const { mergeList, editStore } = reactData;
+            const { tableFullTreeData, selectCheckboxMaps, afterFullData, tableFullData, pendingRowMaps } = internalData;
             const checkboxOpts = $xeTable.computeCheckboxOpts;
             const treeOpts = $xeTable.computeTreeOpts;
             const { transform, mapChildrenField } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
-            const { actived, removeMaps, insertMaps } = editStore;
+            const { actived, removeMaps } = editStore;
+            const insertDataRowMaps = Object.assign({}, editStore.insertMaps);
             const { checkField } = checkboxOpts;
             let delList = [];
             if (!rows) {
@@ -515,14 +517,13 @@ export default {
             });
             // 如果绑定了多选属性，则更新状态
             if (!checkField) {
-                const selectRowMaps = Object.assign({}, selectCheckboxMaps);
                 rows.forEach((row) => {
                     const rowid = getRowid(this, row);
-                    if (selectRowMaps[rowid]) {
-                        delete selectRowMaps[rowid];
+                    if (selectCheckboxMaps[rowid]) {
+                        delete selectCheckboxMaps[rowid];
                     }
                 });
-                this.selectCheckboxMaps = selectRowMaps;
+                reactData.updateCheckboxFlag++;
             }
             // 从数据源中移除
             if (tableFullData === rows) {
@@ -582,10 +583,15 @@ export default {
             // 从新增中移除已删除的数据
             rows.forEach((row) => {
                 const rowid = getRowid($xeTable, row);
-                if (insertMaps[rowid]) {
-                    delete insertMaps[rowid];
+                if (insertDataRowMaps[rowid]) {
+                    delete insertDataRowMaps[rowid];
+                }
+                if (pendingRowMaps[rowid]) {
+                    delete pendingRowMaps[rowid];
                 }
             });
+            editStore.insertMaps = insertDataRowMaps;
+            reactData.pendingRowFlag++;
             $xeTable.updateFooter();
             $xeTable.cacheRowMap(false);
             $xeTable.handleTableData(treeConfig && transform);

package/es/table/module/export/export-panel.js

@@ -78,6 +78,7 @@ export default {
     },
     render(h) {
         const $xeTable = this.$xeTable;
+        const $xeGrid = $xeTable.$xeGrid;
         const { _e, checkedAll, isAll: isAllChecked, isIndeterminate: isAllIndeterminate, showSheet, supportMerge, supportStyle, defaultOptions, storeData } = this;
         const { hasTree, hasMerge, isPrint, hasColgroup, columns } = storeData;
         const { isHeader } = defaultOptions;
@@ -158,7 +159,7 @@ export default {
                 default: () => {
                     const params = {
                         $table: $xeTable,
-                        $grid: $xeTable.xegrid,
+                        $grid: $xeGrid,
                         options: defaultOptions,
                         columns,
                         params: defaultOptions.params
@@ -426,7 +427,7 @@ export default {
                 footer: () => {
                     const params = {
                         $table: $xeTable,
-                        $grid: $xeTable.xegrid,
+                        $grid: $xeGrid,
                         options: defaultOptions,
                         columns,
                         params: defaultOptions.params
@@ -531,9 +532,9 @@ export default {
             }
         },
         printEvent() {
-            const $xetable = this.$parent;
+            const $xeTable = this.$parent;
             this.storeData.visible = false;
-            $xetable.print(Object.assign({}, $xetable.printOpts, this.getExportOption()));
+            $xeTable.print(Object.assign({}, $xeTable.printOpts, this.getExportOption()));
         },
         exportEvent() {
             const $xeTable = this.$xeTable;

package/es/table/module/export/import-panel.js

@@ -61,7 +61,8 @@ export default {
         });
     },
     render(h) {
-        const $xeTable = this.$xeTable;
+        const $xeTable = this.$parent;
+        const $xeGrid = $xeTable.$xeGrid;
         const { hasFile, loading, parseTypeLabel, defaultOptions, storeData, selectName } = this;
         const slots = defaultOptions.slots || {};
         const topSlot = slots.top;
@@ -96,7 +97,7 @@ export default {
                 default: () => {
                     const params = {
                         $table: $xeTable,
-                        $grid: $xeTable.xegrid,
+                        $grid: $xeGrid,
                         options: defaultOptions,
                         params: defaultOptions.params
                     };
@@ -185,7 +186,7 @@ export default {
                 footer: () => {
                     const params = {
                         $table: $xeTable,
-                        $grid: $xeTable.xegrid,
+                        $grid: $xeGrid,
                         options: defaultOptions,
                         params: defaultOptions.params
                     };
@@ -226,8 +227,8 @@ export default {
             });
         },
         selectFileEvent() {
-            const $xetable = this.$parent;
-            $xetable.readFile(this.defaultOptions).then((params) => {
+            const $xeTable = this.$parent;
+            $xeTable.readFile(this.defaultOptions).then((params) => {
                 const { file } = params;
                 Object.assign(this.storeData, parseFile(file), { file });
             }).catch((e) => e);
@@ -245,9 +246,9 @@ export default {
             this.storeData.visible = false;
         },
         importEvent() {
-            const $xetable = this.$parent;
+            const $xeTable = this.$parent;
             this.loading = true;
-            $xetable.importByFile(this.storeData.file, Object.assign({}, $xetable.importOpts, this.defaultOptions)).then(() => {
+            $xeTable.importByFile(this.storeData.file, Object.assign({}, $xeTable.importOpts, this.defaultOptions)).then(() => {
                 this.loading = false;
                 this.storeData.visible = false;
             }).catch(() => {

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

@@ -195,24 +195,24 @@ function getBodyLabelData($xeTable, opts, columns, datas) {
         return item;
     });
 }
-function getExportData($xetable, opts) {
+function getExportData($xeTable, opts) {
     const { columns, dataFilterMethod } = opts;
     let datas = opts.data;
     if (dataFilterMethod) {
         datas = datas.filter((row, index) => dataFilterMethod({ row, $rowIndex: index }));
     }
-    return getBodyLabelData($xetable, opts, columns, datas);
+    return getBodyLabelData($xeTable, opts, columns, datas);
 }
 function getBooleanValue(cellValue) {
     return cellValue === 'TRUE' || cellValue === 'true' || cellValue === true;
 }
-function getHeaderTitle($xetable, opts, column) {
-    const { columnOpts } = $xetable;
+function getHeaderTitle($xeTable, opts, column) {
+    const columnOpts = $xeTable.computeColumnOpts;
     const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod;
-    return headExportMethod ? headExportMethod({ column, options: opts, $table: $xetable }) : ((opts.original ? column.field : column.getTitle()) || '');
+    return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.original ? column.field : column.getTitle()) || '');
 }
-function getFooterCellValue($xetable, opts, row, column) {
-    const { columnOpts } = $xetable;
+function getFooterCellValue($xeTable, opts, row, column) {
+    const columnOpts = $xeTable.computeColumnOpts;
     const renderOpts = column.editRender || column.cellRender;
     let footLabelMethod = column.footerExportMethod;
     if (!footLabelMethod && renderOpts && renderOpts.name) {
@@ -224,9 +224,9 @@ function getFooterCellValue($xetable, opts, row, column) {
     if (!footLabelMethod) {
         footLabelMethod = columnOpts.footerExportMethod;
     }
-    const _columnIndex = $xetable.getVTColumnIndex(column);
+    const _columnIndex = $xeTable.getVTColumnIndex(column);
     if (footLabelMethod) {
-        return footLabelMethod({ $table: $xetable, items: row, itemIndex: _columnIndex, row, _columnIndex, column, options: opts });
+        return footLabelMethod({ $table: $xeTable, items: row, itemIndex: _columnIndex, row, _columnIndex, column, options: opts });
     }
     // 兼容老模式
     if (XEUtils.isArray(row)) {
@@ -477,7 +477,8 @@ function toHtml($xeTable, opts, columns, datas) {
     tables.push('</table>', script);
     return isPrint ? tables.join('') : createHtmlPage(opts, tables.join(''));
 }
-function toXML($xetable, opts, columns, datas) {
+function toXML($xeTable, opts, columns, datas) {
+    const reactData = $xeTable;
     let xml = [
         '<?xml version="1.0"?>',
         '<?mso-application progid="Excel.Sheet"?>',
@@ -498,16 +499,16 @@ function toXML($xetable, opts, columns, datas) {
         columns.map(column => `<Column ss:Width="${column.renderWidth}"/>`).join('')
     ].join('');
     if (opts.isHeader) {
-        xml += `<Row>${columns.map(column => `<Cell><Data ss:Type="String">${getHeaderTitle($xetable, opts, column)}</Data></Cell>`).join('')}</Row>`;
+        xml += `<Row>${columns.map(column => `<Cell><Data ss:Type="String">${getHeaderTitle($xeTable, opts, column)}</Data></Cell>`).join('')}</Row>`;
     }
     datas.forEach(row => {
         xml += '<Row>' + columns.map(column => `<Cell><Data ss:Type="String">${row[column.id]}</Data></Cell>`).join('') + '</Row>';
     });
     if (opts.isFooter) {
-        const footerTableData = $xetable.footerTableData;
+        const { footerTableData } = reactData;
         const footers = getFooterData(opts, footerTableData);
         footers.forEach((row) => {
-            xml += `<Row>${columns.map(column => `<Cell><Data ss:Type="String">${getFooterCellValue($xetable, opts, row, column)}</Data></Cell>`).join('')}</Row>`;
+            xml += `<Row>${columns.map(column => `<Cell><Data ss:Type="String">${getFooterCellValue($xeTable, opts, row, column)}</Data></Cell>`).join('')}</Row>`;
         });
     }
     return `${xml}</Table></Worksheet></Workbook>`;
@@ -559,7 +560,7 @@ export function saveLocalFile(options) {
     }
     return Promise.reject(new Error(getI18n('vxe.error.notExp')));
 }
-function downloadFile($xetable, opts, content) {
+function downloadFile($xeTable, opts, content) {
     const { filename, type, download } = opts;
     if (!download) {
         const blob = getExportBlobByContent(content, opts);
@@ -821,8 +822,9 @@ function handleImport($xeTable, content, opts) {
         }
     }
 }
-function handleFileImport($xetable, file, opts) {
-    const { importOpts } = $xetable;
+function handleFileImport($xeTable, file, opts) {
+    const internalData = $xeTable;
+    const importOpts = $xeTable.computeImportOpts;
     const { importMethod, afterImportMethod } = opts;
     const { type, filename } = parseFile(file);
     // 检查类型，如果为自定义导出，则不需要校验类型
@@ -840,21 +842,21 @@ function handleFileImport($xetable, file, opts) {
     const rest = new Promise((resolve, reject) => {
         const _importResolve = (params) => {
             resolve(params);
-            $xetable._importResolve = null;
-            $xetable._importReject = null;
+            $xeTable._importResolve = null;
+            $xeTable._importReject = null;
         };
         const _importReject = (params) => {
             reject(params);
-            $xetable._importResolve = null;
-            $xetable._importReject = null;
+            $xeTable._importResolve = null;
+            $xeTable._importReject = null;
         };
-        $xetable._importResolve = _importResolve;
-        $xetable._importReject = _importReject;
+        $xeTable._importResolve = _importResolve;
+        $xeTable._importReject = _importReject;
         if (window.FileReader) {
             const options = Object.assign({ mode: 'insertTop' }, opts, { type, filename });
             if (options.remote) {
                 if (importMethod) {
-                    Promise.resolve(importMethod({ file, options, $table: $xetable })).then(() => {
+                    Promise.resolve(importMethod({ file, options, $table: $xeTable })).then(() => {
                         _importResolve({ status: true });
                     }).catch(() => {
                         _importResolve({ status: true });
@@ -865,14 +867,15 @@ function handleFileImport($xetable, file, opts) {
                 }
             }
             else {
-                $xetable.preventEvent(null, 'event.import', { file, options, columns: $xetable.tableFullColumn }, () => {
+                const { tableFullColumn } = internalData;
+                $xeTable.preventEvent(null, 'event.import', { file, options, columns: tableFullColumn }, () => {
                     const reader = new FileReader();
                     reader.onerror = () => {
                         errLog('vxe.error.notType', [type]);
                         _importReject({ status: false });
                     };
                     reader.onload = (e) => {
-                        handleImport($xetable, e.target.result, options);
+                        handleImport($xeTable, e.target.result, options);
                     };
                     reader.readAsText(file, options.encoding || 'UTF-8');
                 });
@@ -886,11 +889,11 @@ function handleFileImport($xetable, file, opts) {
     });
     return rest.then(() => {
         if (afterImportMethod) {
-            afterImportMethod({ status: true, options: opts, $table: $xetable });
+            afterImportMethod({ status: true, options: opts, $table: $xeTable });
         }
     }).catch((e) => {
         if (afterImportMethod) {
-            afterImportMethod({ status: false, options: opts, $table: $xetable });
+            afterImportMethod({ status: false, options: opts, $table: $xeTable });
         }
         return Promise.reject(e);
     });

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

@@ -54,14 +54,24 @@ export default {
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        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'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
                 ];
             }
@@ -180,19 +190,20 @@ export default {
          *************************/
         // （单选）筛选发生改变
         changeRadioOption(evnt, checked, item) {
-            const { $parent: $xetable, filterStore } = this;
+            const $xeTable = this.$parent;
+            const { filterStore } = this;
             filterStore.options.forEach((option) => {
                 option._checked = false;
             });
             item._checked = checked;
-            $xetable.checkFilterOptions();
+            $xeTable.checkFilterOptions();
             this.confirmFilter(evnt);
         },
         // （多选）筛选发生改变
         changeMultipleOption(evnt, checked, item) {
-            const { $parent: $xetable } = this;
+            const $xeTable = this.$parent;
             item._checked = checked;
-            $xetable.checkFilterOptions();
+            $xeTable.checkFilterOptions();
         },
         changeAllOption(evnt, checked) {
             if (this.filterStore.multiple) {
@@ -213,13 +224,13 @@ export default {
         },
         // 确认筛选
         confirmFilter(evnt) {
-            const { $parent: $xetable } = this;
-            $xetable.handleFilterConfirmFilter(evnt);
+            const $xeTable = this.$parent;
+            $xeTable.handleFilterConfirmFilter(evnt);
         },
         // 重置筛选
         resetFilter(evnt) {
-            const { $parent: $xetable } = this;
-            $xetable.handleFilterResetFilter(evnt);
+            const $xeTable = this.$parent;
+            $xeTable.handleFilterResetFilter(evnt);
         }
         /*************************
          * Publish methods