vxe-table 4.17.11 → 4.17.13

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

@@ -468,15 +468,12 @@ hooks.add('tableExportModule', {
             if (!footLabelMethod) {
                 footLabelMethod = columnOpts.footerExportMethod;
             }
-            const _columnIndex = $xeTable.getVTColumnIndex(column);
             if (footLabelMethod) {
+                const _columnIndex = $xeTable.getVTColumnIndex(column);
                 return footLabelMethod({ $table: $xeTable, items: row, itemIndex: _columnIndex, row, _columnIndex, column, options: opts });
             }
-            // 兼容老模式
-            if (XEUtils.isArray(row)) {
-                return XEUtils.toValueString(row[_columnIndex]);
-            }
-            return XEUtils.get(row, column.field);
+            const cellValue = $xeTable.getFooterCellLabel(row, column);
+            return cellValue;
         };
         const toCsv = ($xeTable, opts, columns, datas) => {
             let content = csvBOM;

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

@@ -297,7 +297,7 @@ hooks.add('tableMenuModule', {
                 const $xeGrid = $xeTable.xeGrid;
                 const $xeGantt = $xeTable.xeGantt;
                 // 如果一级菜单有配置 code 则允许点击，否则不能点击
-                if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
+                if (!menu.loading && !menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
                     const gMenuOpts = menus.get(menu.code);
                     const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt });
                     const tmMethod = gMenuOpts ? (gMenuOpts.tableMenuMethod || gMenuOpts.menuMethod) : null;

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

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { getFuncText } from '../../../ui/src/utils';
 import { getSlotVNs } from '../../../ui/src/vn';
-const { getIcon, renderEmptyElement } = VxeUI;
+const { getIcon, getI18n, renderEmptyElement } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeTableMenuPanel',
     setup(props, context) {
@@ -45,7 +45,8 @@ export default defineVxeComponent({
                                 class: 'vxe-context-menu--option-wrapper',
                                 key: gIndex
                             }, options.map((item, index) => {
-                                const hasChildMenus = item.children && item.children.some((child) => child.visible !== false);
+                                const { children, loading } = item;
+                                const hasChildMenus = children && children.some((child) => child.visible !== false);
                                 const prefixOpts = Object.assign({}, item.prefixConfig);
                                 const prefixIcon = prefixOpts.icon || item.prefixIcon;
                                 const suffixOpts = Object.assign({}, item.suffixConfig);
@@ -55,6 +56,7 @@ export default defineVxeComponent({
                                     ? renderEmptyElement($xeTable)
                                     : h('li', {
                                         class: [item.className, {
+                                                'link--loading': loading,
                                                 'link--disabled': item.disabled,
                                                 'link--active': item === ctxMenuStore.selected
                                             }],
@@ -75,17 +77,23 @@ export default defineVxeComponent({
                                             h('div', {
                                                 class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
                                             }, [
-                                                prefixIcon && XEUtils.isFunction(prefixIcon)
-                                                    ? h('span', {}, getSlotVNs(prefixIcon({})))
-                                                    : h('i', {
-                                                        class: prefixIcon
-                                                    }),
+                                                loading
+                                                    ? h('span', {
+                                                        class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                                    })
+                                                    : (prefixIcon && XEUtils.isFunction(prefixIcon)
+                                                        ? h('span', {}, getSlotVNs(prefixIcon({})))
+                                                        : h('span', {}, [
+                                                            h('i', {
+                                                                class: prefixIcon
+                                                            })
+                                                        ])),
                                                 prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                                             ]),
                                             h('div', {
                                                 class: 'vxe-context-menu--link-content',
                                                 title: menuContent
-                                            }, menuContent),
+                                            }, loading ? getI18n('vxe.table.menuLoading') : menuContent),
                                             h('div', {
                                                 class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
                                             }, [
@@ -103,6 +111,7 @@ export default defineVxeComponent({
                                                         'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
                                                     }]
                                             }, item.children.map((child, cIndex) => {
+                                                const { loading: childLoading } = child;
                                                 const childPrefixOpts = Object.assign({}, child.prefixConfig);
                                                 const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon;
                                                 const childSuffixOpts = Object.assign({}, child.suffixConfig);
@@ -112,6 +121,7 @@ export default defineVxeComponent({
                                                     ? null
                                                     : h('li', {
                                                         class: [child.className, {
+                                                                'link--loading': childLoading,
                                                                 'link--disabled': child.disabled,
                                                                 'link--active': child === ctxMenuStore.selectChild
                                                             }],
@@ -132,17 +142,23 @@ export default defineVxeComponent({
                                                             h('div', {
                                                                 class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
                                                             }, [
-                                                                childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
-                                                                    ? h('span', {}, getSlotVNs(childPrefixIcon({})))
-                                                                    : h('i', {
-                                                                        class: childPrefixIcon
-                                                                    }),
+                                                                child.loading
+                                                                    ? h('span', {
+                                                                        class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                                                    })
+                                                                    : (childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
+                                                                        ? h('span', {}, getSlotVNs(childPrefixIcon({})))
+                                                                        : h('span', {}, [
+                                                                            h('i', {
+                                                                                class: childPrefixIcon
+                                                                            })
+                                                                        ])),
                                                                 childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
                                                             ]),
                                                             h('div', {
                                                                 class: 'vxe-context-menu--link-content',
                                                                 title: childMenuContent
-                                                            }, childMenuContent),
+                                                            }, childLoading ? getI18n('vxe.table.menuLoading') : childMenuContent),
                                                             h('div', {
                                                                 class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
                                                             }, [

package/es/table/src/cell.js

@@ -5,7 +5,7 @@ import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/sr
 import { updateCellTitle } from '../../ui/src/dom';
 import { createColumn, getRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
-const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI;
+const { getI18n, getIcon, renderer, renderEmptyElement } = VxeUI;
 function renderTitlePrefixIcon(params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
@@ -207,54 +207,23 @@ function renderTitleContent(params, content) {
     ];
 }
 function getFooterContent(params) {
-    const { $table, column, _columnIndex, items, row } = params;
-    const { slots, editRender, cellRender, footerFormatter } = column;
+    const { $table, column, row } = params;
+    const { slots, editRender, cellRender } = column;
     const renderOpts = editRender || cellRender;
     const footerSlot = slots ? slots.footer : null;
     if (footerSlot) {
         return $table.callSlot(footerSlot, params);
     }
-    let itemValue = '';
-    // 兼容老模式
-    if (XEUtils.isArray(items)) {
-        itemValue = items[_columnIndex];
-    }
-    else {
-        itemValue = XEUtils.get(row, column.field);
-    }
-    const footParams = Object.assign(params, {
-        cellValue: itemValue,
-        itemValue
-    });
-    if (footerFormatter) {
-        if (XEUtils.isFunction(footerFormatter)) {
-            return [
-                h('span', {
-                    class: 'vxe-cell--label'
-                }, `${footerFormatter(footParams)}`)
-            ];
-        }
-        const isArr = XEUtils.isArray(footerFormatter);
-        const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter);
-        const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null;
-        if (footerFormatMethod) {
-            return [
-                h('span', {
-                    class: 'vxe-cell--label'
-                }, `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`)
-            ];
-        }
-        return [
-            h('span', {
-                class: 'vxe-cell--label'
-            }, '')
-        ];
-    }
+    const itemValue = $table.getFooterCellLabel(row, column);
     if (renderOpts) {
         const compConf = renderer.get(renderOpts.name);
         if (compConf) {
             const rtFooter = compConf.renderTableFooter || compConf.renderFooter;
             if (rtFooter) {
+                const footParams = Object.assign(params, {
+                    cellValue: itemValue,
+                    itemValue
+                });
                 return getSlotVNs(rtFooter(renderOpts, footParams));
             }
         }

package/es/table/src/columnInfo.js

@@ -11,13 +11,16 @@ export class ColumnInfo {
         const $xeGrid = $xeTable.xeGrid;
         const $xeGantt = $xeTable.xeGantt;
         const $xeGGWrapper = $xeGrid || $xeGantt;
-        const { field, editRender, filterRender } = _vm;
+        const { field, editRender, filterRender, headerFormatter } = _vm;
         const colId = _vm.colId || XEUtils.uniqueId('col_');
         const formatter = _vm.formatter;
         const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
         const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
         const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null;
         const filters = toFilters(_vm.filters, colId);
+        if (headerFormatter) {
+            errLog('vxe.error.notProp', ['header-formatter']);
+        }
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
         if (_vm.type && types.indexOf(_vm.type) === -1) {
             warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);

package/es/table/src/table.js

@@ -5093,7 +5093,13 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    const formatParams = { cellValue, row, rowIndex: tableMethods.getRowIndex(row), column, columnIndex: tableMethods.getColumnIndex(column) };
+                    const formatParams = {
+                        cellValue,
+                        row,
+                        rowIndex: $xeTable.getRowIndex(row),
+                        column,
+                        columnIndex: $xeTable.getColumnIndex(column)
+                    };
                     if (XEUtils.isString(formatter)) {
                         const gFormatOpts = formats.get(formatter);
                         const tcFormatMethod = gFormatOpts ? (gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod) : null;
@@ -5113,6 +5119,73 @@ export default defineVxeComponent({
                 }
                 return cellLabel;
             },
+            getFooterCellLabel(row, fieldOrColumn) {
+                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+                if (!column) {
+                    return null;
+                }
+                const { footerFormatter } = column;
+                const _columnIndex = $xeTable.getVTColumnIndex(column);
+                let itemValue = '';
+                // 兼容老模式
+                if (XEUtils.isArray(row)) {
+                    itemValue = row[_columnIndex];
+                }
+                else {
+                    itemValue = XEUtils.get(row, column.field);
+                }
+                let cellLabel = itemValue;
+                if (footerFormatter) {
+                    let formatData;
+                    const { footerTableData } = reactData;
+                    const { footerFullDataRowData } = internalData;
+                    const colid = column.id;
+                    const $rowIndex = footerTableData.indexOf(row);
+                    let rowRest = null;
+                    if ($rowIndex > -1) {
+                        rowRest = footerFullDataRowData[$rowIndex];
+                        if (!rowRest) {
+                            rowRest = footerFullDataRowData[$rowIndex] = {};
+                        }
+                        formatData = rowRest.formatData;
+                        if (!formatData) {
+                            formatData = footerFullDataRowData[$rowIndex].formatData = {};
+                        }
+                        if (rowRest && formatData[colid]) {
+                            if (formatData[colid].value === itemValue) {
+                                return formatData[colid].label;
+                            }
+                        }
+                    }
+                    const footerFormatParams = {
+                        cellValue: itemValue,
+                        itemValue,
+                        row,
+                        items: row,
+                        $rowIndex,
+                        column,
+                        _columnIndex,
+                        columnIndex: $xeTable.getColumnIndex(column)
+                    };
+                    if (XEUtils.isString(footerFormatter)) {
+                        const gFormatOpts = formats.get(footerFormatter);
+                        const fcFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null;
+                        cellLabel = fcFormatMethod ? fcFormatMethod(footerFormatParams) : '';
+                    }
+                    else if (XEUtils.isArray(footerFormatter)) {
+                        const gFormatOpts = formats.get(footerFormatter[0]);
+                        const fcFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null;
+                        cellLabel = fcFormatMethod ? fcFormatMethod(footerFormatParams, ...footerFormatter.slice(1)) : '';
+                    }
+                    else {
+                        cellLabel = footerFormatter(footerFormatParams);
+                    }
+                    if (formatData) {
+                        formatData[colid] = { value: itemValue, label: cellLabel };
+                    }
+                }
+                return cellLabel;
+            },
             /**
              * 检查是否为临时行数据
              */
@@ -12890,6 +12963,7 @@ export default defineVxeComponent({
             footFlag.value++;
         });
         watch(footFlag, () => {
+            internalData.footerFullDataRowData = {};
             $xeTable.updateFooter();
         });
         watch(() => props.syncResize, (value) => {

package/es/table/src/util.js

@@ -76,6 +76,7 @@ export function createInternalData() {
         fullDataRowIdData: {},
         // 数据集（仅可视）
         visibleDataRowIdData: {},
+        footerFullDataRowData: {},
         // 渲染中缓存数据
         sourceDataRowIdData: {},
         fullColumnIdData: {},

package/es/table/style.css

@@ -1716,17 +1716,20 @@
 .vxe-table--context-menu-clild-wrapper li.link--active > .vxe-context-menu--link {
   color: #2B2B2B;
 }
-.vxe-context-menu--option-wrapper li.link--disabled > .vxe-context-menu--link,
+.vxe-context-menu--option-wrapper li.link--loading > .vxe-context-menu--link, .vxe-context-menu--option-wrapper li.link--disabled > .vxe-context-menu--link,
+.vxe-table--context-menu-clild-wrapper li.link--loading > .vxe-context-menu--link,
 .vxe-table--context-menu-clild-wrapper li.link--disabled > .vxe-context-menu--link {
   color: var(--vxe-ui-font-disabled-color);
   cursor: no-drop;
 }
-.vxe-context-menu--option-wrapper li.link--disabled.link--active,
+.vxe-context-menu--option-wrapper li.link--loading.link--active, .vxe-context-menu--option-wrapper li.link--disabled.link--active,
+.vxe-table--context-menu-clild-wrapper li.link--loading.link--active,
 .vxe-table--context-menu-clild-wrapper li.link--disabled.link--active {
   border-color: #C0C1C2;
   background-color: #EEEEEE;
 }
-.vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,
+.vxe-context-menu--option-wrapper li.link--loading.link--active:hover, .vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,
+.vxe-table--context-menu-clild-wrapper li.link--loading.link--active:hover,
 .vxe-table--context-menu-clild-wrapper li.link--disabled.link--active:hover {
   background-color: inherit;
 }