vxe-table 4.18.0-beta.2 → 4.18.0-beta.20

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

@@ -6,14 +6,19 @@ const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'getCustomVisible',
 VxeUI.hooks.add('tableCustomModule', {
     setupTable($xeTable) {
         const { reactData, internalData } = $xeTable;
-        const { computeCustomOpts, computeRowGroupFields } = $xeTable.getComputeMaps();
+        const { computeCustomOpts, computeRowGroupFields, computeCustomSimpleMode } = $xeTable.getComputeMaps();
         const { refElem } = $xeTable.getRefMaps();
         const $xeGantt = $xeTable.xeGantt;
-        const calcMaxHeight = () => {
+        const updatePopupStyle = () => {
             const { customStore } = reactData;
+            const customOpts = computeCustomOpts.value;
+            const customSimpleMode = computeCustomSimpleMode.value;
+            const showCustomSimpleOutside = customSimpleMode === 'outside';
+            const { popupOptions } = customOpts;
+            const { maxHeight } = popupOptions || {};
             let wrapperEl = refElem.value;
-            // 判断面板不能大于表格高度
-            let tableHeight = 0;
+            let popupTop = 0;
+            let popupMaxHeight = 0;
             if ($xeGantt) {
                 const { refGanttContainerElem } = $xeGantt.getRefMaps();
                 const ganttContainerElem = refGanttContainerElem.value;
@@ -21,10 +26,21 @@ VxeUI.hooks.add('tableCustomModule', {
                     wrapperEl = ganttContainerElem;
                 }
             }
-            if (wrapperEl) {
-                tableHeight = wrapperEl.clientHeight - 28;
+            if (showCustomSimpleOutside) {
+                if (wrapperEl) {
+                    popupTop = wrapperEl.offsetTop;
+                }
+                popupMaxHeight = XEUtils.eqNull(maxHeight) ? 360 : maxHeight;
+            }
+            else {
+                // 判断面板不能大于表格高度
+                if (wrapperEl) {
+                    popupMaxHeight = wrapperEl.clientHeight - 22;
+                }
+                popupMaxHeight = Math.max(88, popupMaxHeight);
             }
-            customStore.maxHeight = Math.max(88, tableHeight);
+            customStore.popupTop = popupTop;
+            customStore.maxHeight = XEUtils.eqNull(maxHeight) ? popupMaxHeight : maxHeight;
         };
         const openCustom = () => {
             const { initStore, customStore } = reactData;
@@ -32,8 +48,8 @@ VxeUI.hooks.add('tableCustomModule', {
             initStore.custom = true;
             handleUpdateCustomColumn();
             checkCustomStatus();
-            calcMaxHeight();
-            return nextTick().then(() => calcMaxHeight());
+            updatePopupStyle();
+            return nextTick().then(() => updatePopupStyle());
         };
         const handleUpdateCustomColumn = () => {
             const { customStore } = reactData;

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

@@ -2,7 +2,7 @@ import { h, inject, ref, provide, nextTick, TransitionGroup, reactive, onUnmount
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText } from '../../../ui/src/utils';
-import { getTpImg, addClass, removeClass, hasControlKey } from '../../../ui/src/dom';
+import { getTpImg, addClass, removeClass, hasControlKey, toCssUnit } from '../../../ui/src/dom';
 import { errLog } from '../../../ui/src/log';
 import XEUtils from 'xe-utils';
 const { getI18n, getIcon, renderEmptyElement } = VxeUI;
@@ -572,7 +572,7 @@ export default defineVxeComponent({
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
             const columnDragOpts = computeColumnDragOpts.value;
-            const { maxHeight } = customStore;
+            const { maxHeight, popupTop } = customStore;
             const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
             const { isCrossDrag } = columnDragOpts;
@@ -704,17 +704,18 @@ export default defineVxeComponent({
                     ]));
                 }
             });
+            const popupStys = {};
+            if (maxHeight && !['left', 'right'].includes(placement || '')) {
+                popupStys.top = toCssUnit(popupTop);
+                popupStys.maxHeight = toCssUnit(maxHeight);
+            }
             return h('div', {
                 ref: refElem,
                 key: 'simple',
                 class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
                         'is--active': customStore.visible
                     }],
-                style: maxHeight && !['left', 'right'].includes(placement || '')
-                    ? {
-                        maxHeight: `${maxHeight}px`
-                    }
-                    : {}
+                style: popupStys
             }, customStore.visible
                 ? [
                     h('div', {
@@ -1029,6 +1030,11 @@ export default defineVxeComponent({
                     }, defaultSlot
                         ? $xeTable.callSlot(defaultSlot, params)
                         : [
+                            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+                                ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+                                    customStore
+                                })
+                                : renderEmptyElement($xeTable),
                             h('div', {
                                 ref: refCustomBodyElem,
                                 class: 'vxe-table-custom-popup--handle-wrapper'
@@ -1107,12 +1113,7 @@ export default defineVxeComponent({
                                     }, $xeTable.callSlot(bottomSlot, params))
                                     : renderEmptyElement($xeTable),
                                 renderDragTip()
-                            ]),
-                            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
-                                ? h($xeTable.getPivotTableAggregatePopupPanel(), {
-                                    customStore
-                                })
-                                : renderEmptyElement($xeTable)
+                            ])
                         ]);
                 },
                 footer: () => {

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

@@ -127,7 +127,7 @@ hooks.add('tableEditModule', {
                     if (treeConfig) {
                         throw new Error(getI18n('vxe.error.noTree', ['insert']));
                     }
-                    warnLog(getI18n('vxe.error.noGroup', ['remove']));
+                    errLog(getI18n('vxe.error.noGroup', ['insert']));
                     // insertGroupRow(newRecords, false)
                 }
                 else {
@@ -159,7 +159,7 @@ hooks.add('tableEditModule', {
                         if (treeConfig) {
                             throw new Error(getI18n('vxe.error.noTree', ['insert']));
                         }
-                        warnLog(getI18n('vxe.error.noGroup', ['remove']));
+                        errLog(getI18n('vxe.error.noGroup', ['insert']));
                         // insertGroupRow(newRecords, true)
                     }
                     else {
@@ -235,7 +235,7 @@ hooks.add('tableEditModule', {
                         if (treeConfig) {
                             throw new Error(getI18n('vxe.error.noTree', ['insert']));
                         }
-                        warnLog(getI18n('vxe.error.noGroup', ['remove']));
+                        errLog(getI18n('vxe.error.noGroup', ['insert']));
                     }
                     else {
                         if (treeConfig) {

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

@@ -1321,7 +1321,21 @@ hooks.add('tableExportModule', {
                                 return Promise.resolve((beforeQueryAll || ajaxMethods)(params))
                                     .then(rest => {
                                     const listProp = resConfigs.list;
-                                    handleOptions.data = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                    let tdData = [];
+                                    if (listProp) {
+                                        if (XEUtils.isFunction(listProp)) {
+                                            tdData = listProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt });
+                                        }
+                                        else {
+                                            tdData = XEUtils.isArray(rest) ? rest : XEUtils.get(rest, listProp);
+                                        }
+                                    }
+                                    else {
+                                        if (XEUtils.isArray(rest)) {
+                                            tdData = rest;
+                                        }
+                                    }
+                                    handleOptions.data = tdData;
                                     if (afterQueryAll) {
                                         afterQueryAll(params);
                                     }

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

@@ -205,9 +205,17 @@ export default defineVxeComponent({
             const filterOpts = computeFilterOpts.value;
             const hasCheckOption = computeHasCheckOption.value;
             const { filterRender, filterMultiple } = column;
+            const { confirmButtonText, resetButtonText, showFooter } = filterOpts;
             const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
             const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
-            return (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : filterMultiple)
+            let showFlFoot = !!filterMultiple;
+            if (XEUtils.isBoolean(showFooter)) {
+                showFlFoot = showFooter;
+            }
+            else if (compConf) {
+                showFlFoot = !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false);
+            }
+            return showFlFoot
                 ? [
                     h('div', {
                         class: 'vxe-table--filter-footer'
@@ -218,10 +226,10 @@ export default defineVxeComponent({
                             },
                             disabled: isDisabled,
                             onClick: confirmFilter
-                        }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
+                        }, confirmButtonText || getI18n('vxe.table.confirmFilter')),
                         h('button', {
                             onClick: resetFilter
-                        }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
+                        }, resetButtonText || getI18n('vxe.table.resetFilter'))
                     ])
                 ]
                 : [];

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

@@ -112,20 +112,21 @@ function validRuleValue(rule, val, required) {
     }
     return true;
 }
-function checkRuleStatus(rule, val) {
-    const { required } = rule;
-    const isEmptyVal = XEUtils.isArray(val) ? !val.length : eqEmptyValue(val);
+function checkRuleStatus(rule, row, val) {
+    const { required, field } = rule;
+    const currVal = field ? XEUtils.get(row, field) : val;
+    const isEmptyVal = XEUtils.isArray(currVal) ? !currVal.length : eqEmptyValue(currVal);
     if (required) {
         if (isEmptyVal) {
             return false;
         }
-        if (!validRuleValue(rule, val, required)) {
+        if (!validRuleValue(rule, currVal, required)) {
             return false;
         }
     }
     else {
         if (!isEmptyVal) {
-            if (!validRuleValue(rule, val, required)) {
+            if (!validRuleValue(rule, currVal, required)) {
                 return false;
             }
         }
@@ -493,7 +494,7 @@ hooks.add('tableValidatorModule', {
                                     }
                                 }
                                 else {
-                                    if (!checkRuleStatus(rule, cellValue)) {
+                                    if (!checkRuleStatus(rule, row, cellValue)) {
                                         internalData.validRuleErr = true;
                                         errorRules.push(new Rule(rule));
                                     }

package/es/table/render/index.js

@@ -647,6 +647,9 @@ function handleNumberCell(renderOpts, params) {
             }
         }
         else {
+            if (type === 'integer') {
+                cellValue = XEUtils.toInteger(cellValue);
+            }
             if (showNegativeStatus) {
                 if (XEUtils.toNumber(cellValue) < 0) {
                     isNegative = true;
@@ -660,6 +663,16 @@ function handleNumberCell(renderOpts, params) {
         }
         : {});
 }
+function handleFormatDatePicker(renderOpts, params) {
+    const { props = {} } = renderOpts;
+    const { cellValue } = params;
+    if (cellValue) {
+        if (props.type !== 'time') {
+            return getLabelFormatDate(cellValue, props);
+        }
+    }
+    return cellValue;
+}
 function handleFormatSelect(renderOpts, params) {
     const { cellValue } = params;
     return handleSelectCellValue(cellValue, renderOpts);
@@ -886,6 +899,7 @@ renderer.mixin({
             }
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
+        tableCellFormatter: handleFormatDatePicker,
         renderTableDefault: defaultEditRender,
         createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: defaultFilterRender,

package/es/table/src/body.js

@@ -98,7 +98,7 @@ export default defineVxeComponent({
             const $xeGantt = $xeTable.xeGantt;
             const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
             const { tableData, tableColumn, dragRow, overflowX, overflowY, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData;
-            const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore } = tableInternalData;
+            const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps } = tableInternalData;
             const cellOpts = computeCellOpts.value;
             const validOpts = computeValidOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
@@ -118,7 +118,7 @@ export default defineVxeComponent({
             const areaOpts = computeAreaOpts.value;
             const cellOffsetWidth = computeCellOffsetWidth.value;
             const { selectCellToRow } = areaOpts;
-            const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column;
+            const { field, type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column;
             const { verticalAlign: allVerticalAlign } = cellOpts;
             const { actived } = editStore;
             const rowRest = fullAllDataRowIdData[rowid] || {};
@@ -273,8 +273,8 @@ export default defineVxeComponent({
                 }
             }
             // 如果编辑列开启显示状态
-            if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
-                isDirty = $xeTable.isUpdateByRow(row, column.field);
+            if (!fixedHiddenColumn && editConfig && (editOpts.showStatus || editOpts.showUpdateStatus) && keepUpdateFieldMaps[field]) {
+                isDirty = $xeTable.isUpdateByRow(row, field);
             }
             const isVNAutoHeight = !hasEllipsis && (scrollYLoad || scrollXLoad);
             let cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
@@ -544,6 +544,13 @@ export default defineVxeComponent({
                     const expandOpts = computeExpandOpts.value;
                     const { height: expandHeight, padding, mode: expandMode } = expandOpts;
                     if (expandMode === 'fixed') {
+                        const currExpHeight = rowRest.expandHeight;
+                        let expHeight = 0;
+                        if (rowExpandHeightFlag) {
+                            if (currExpHeight || expandHeight) {
+                                expHeight = (currExpHeight || expandHeight || 0) + 1;
+                            }
+                        }
                         rows.push(h('tr', {
                             class: 'vxe-body--row-expanded-place',
                             key: `expand_${rowid}`,
@@ -553,7 +560,7 @@ export default defineVxeComponent({
                                 class: 'vxe-body--row-expanded-place-column',
                                 colspan: tableColumn.length,
                                 style: {
-                                    height: `${rowExpandHeightFlag ? (rowRest.expandHeight || expandHeight) : 0}px`
+                                    height: `${expHeight}px`
                                 }
                             })
                         ]));

package/es/table/src/emits.js

@@ -64,6 +64,7 @@ export const tableEmits = [
     'column-dragover',
     'column-dragend',
     'enter-append-row',
+    'tab-append-row',
     'edit-actived',
     'edit-activated',
     'edit-disabled',

package/es/table/src/props.js

@@ -271,6 +271,8 @@ export const tableProps = {
     fnrConfig: Object,
     // 编辑配置项
     editConfig: Object,
+    // 数据状态监听配置项
+    editDirtyConfig: Object,
     // 校验配置项
     validConfig: Object,
     // 校验规则配置项