vxe-table 4.19.14 → 4.19.16

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

@@ -668,7 +668,7 @@ hooks.add('tableExportModule', {
         const toHtml = (opts, columns, datas) => {
             const { id, border, treeConfig, headerAlign: allHeaderAlign, align: allAlign, footerAlign: allFooterAlign, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow } = props;
             const { isAllSelected, isIndeterminate } = reactData;
-            const { mergeBodyCellMaps } = internalData;
+            const { mergeBodyCellMaps, mergeFooterCellMaps } = internalData;
             const treeOpts = computeTreeOpts.value;
             const { print: isPrint, isHeader, isFooter, isColgroup, isMerge, colgroups, original } = opts;
             const allCls = 'check-all';
@@ -806,15 +806,34 @@ hooks.add('tableExportModule', {
                 const footers = getFooterData($xeTable, opts, footerTableData);
                 if (footers.length) {
                     tables.push('<tfoot>');
-                    footers.forEach((row) => {
+                    footers.forEach((row, rIndex) => {
                         tables.push(`<tr>${columns.map((column) => {
                             const footAlign = column.footerAlign || column.align || allFooterAlign || allAlign;
                             const classNames = hasEllipsis(column, 'showOverflow', allColumnOverflow) ? ['col--ellipsis'] : [];
                             const cellValue = getFooterCellValue(opts, row, column);
+                            let rowSpan = 1;
+                            let colSpan = 1;
+                            if (isMerge) {
+                                const _rowIndex = rIndex;
+                                const _columnIndex = $xeTable.getVTColumnIndex(column);
+                                const spanRest = mergeFooterCellMaps[`${_rowIndex}:${_columnIndex}`];
+                                if (spanRest) {
+                                    const { rowspan, colspan } = spanRest;
+                                    if (!rowspan || !colspan) {
+                                        return '';
+                                    }
+                                    if (rowspan > 1) {
+                                        rowSpan = rowspan;
+                                    }
+                                    if (colspan > 1) {
+                                        colSpan = colspan;
+                                    }
+                                }
+                            }
                             if (footAlign) {
                                 classNames.push(`col--${footAlign}`);
                             }
-                            return `<td class="${classNames.join(' ')}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}>${formatText(cellValue, true)}</div></td>`;
+                            return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}>${formatText(cellValue, true)}</div></td>`;
                         }).join('')}</tr>`);
                     });
                     tables.push('</tfoot>');

package/es/table/render/index.js

@@ -763,7 +763,7 @@ function handleSetTreeSelectValue(renderOpts, params) {
  */
 renderer.mixin({
     input: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: nativeEditRender,
         renderTableDefault: nativeEditRender,
         createTableFilterOptions: defaultFilterOptions,
@@ -771,7 +771,7 @@ renderer.mixin({
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     textarea: {
-        tableAutoFocus: 'textarea',
+        tableAutoFocus: true,
         renderTableEdit: nativeEditRender
     },
     select: {
@@ -811,7 +811,7 @@ renderer.mixin({
         tableExportMethod: handleExportSelectMethod
     },
     VxeInput: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultEditRender,
         renderTableCell(renderOpts, params) {
             const { props = {} } = renderOpts;
@@ -851,7 +851,7 @@ renderer.mixin({
         }
     },
     VxeNumberInput: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultEditRender,
         renderTableCell: handleNumberCell,
         renderTableFooter(renderOpts, params) {
@@ -903,7 +903,7 @@ renderer.mixin({
         }
     },
     VxeDatePicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultEditRender,
         renderTableCell(renderOpts, params) {
             const props = renderOpts.props || {};
@@ -929,7 +929,7 @@ renderer.mixin({
         tableFilterDefaultMethod: handleFilterMethod
     },
     VxeDateRangePicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit(renderOpts, params) {
             const { startField, endField } = renderOpts;
             const { $table, row, column } = params;
@@ -1029,7 +1029,7 @@ renderer.mixin({
         }
     },
     VxeTextarea: {
-        tableAutoFocus: 'textarea',
+        tableAutoFocus: true,
         renderTableDefault: defaultEditRender,
         renderTableEdit: defaultEditRender,
         renderTableCell(renderOpts, params) {
@@ -1050,7 +1050,7 @@ renderer.mixin({
         }
     },
     VxeSelect: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultSelectEditRender,
         renderTableDefault: defaultSelectEditRender,
         renderTableCell(renderOpts, params) {
@@ -1152,7 +1152,7 @@ renderer.mixin({
         tableExportMethod: handleExportSelectMethod
     },
     VxeTreeSelect: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultTableOrTreeSelectEditRender,
         renderTableCell(renderOpts, params) {
             const { options, optionGroups } = renderOpts;
@@ -1214,8 +1214,36 @@ renderer.mixin({
         tableCellPasteMethod: handleSetTreeSelectValue,
         tableExportMethod: handleExportTreeSelectMethod
     },
+    VxeCascader: {
+        tableAutoFocus: true,
+        renderTableEdit: defaultTableOrTreeSelectEditRender,
+        renderTableCell(renderOpts, params) {
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleTreeSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getTreeSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(renderOpts, params, cellResult);
+        },
+        tableCellFormatter: handleFormatTreeSelect,
+        tableCellCopyMethod: handleFormatTreeSelect,
+        tableCellPasteMethod: handleSetTreeSelectValue,
+        tableExportMethod: handleExportTreeSelectMethod
+    },
     VxeTableSelect: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultTableOrTreeSelectEditRender,
         renderTableCell(renderOpts, params) {
             const { options, optionGroups } = renderOpts;
@@ -1243,7 +1271,7 @@ renderer.mixin({
         tableExportMethod: handleExportTreeSelectMethod
     },
     VxeColorPicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit(renderOpts, params) {
             const { row, column } = params;
             const { options } = renderOpts;
@@ -1268,7 +1296,7 @@ renderer.mixin({
         }
     },
     VxeIconPicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit(renderOpts, params) {
             const { row, column } = params;
             const { options } = renderOpts;
@@ -1342,7 +1370,7 @@ renderer.mixin({
     },
     // 以下已废弃
     $input: {
-        tableAutoFocus: '.vxe-input--inner',
+        tableAutoFocus: 'input',
         renderTableEdit: oldEditRender,
         renderTableCell(renderOpts, params) {
             var _a;
@@ -1370,7 +1398,7 @@ renderer.mixin({
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     $textarea: {
-        tableAutoFocus: '.vxe-textarea--inner'
+        tableAutoFocus: 'textarea'
     },
     $button: {
         renderTableDefault: oldButtonEditRender
@@ -1379,7 +1407,7 @@ renderer.mixin({
         renderTableDefault: oldButtonsEditRender
     },
     $select: {
-        tableAutoFocus: '.vxe-input--inner',
+        tableAutoFocus: 'input',
         renderTableEdit: oldSelectEditRender,
         renderTableDefault: oldSelectEditRender,
         renderTableCell(renderOpts, params) {
@@ -1397,13 +1425,13 @@ renderer.mixin({
         tableExportMethod: handleExportSelectMethod
     },
     $radio: {
-        tableAutoFocus: '.vxe-radio--input'
+        tableAutoFocus: 'input'
     },
     $checkbox: {
-        tableAutoFocus: '.vxe-checkbox--input'
+        tableAutoFocus: 'input'
     },
     $switch: {
-        tableAutoFocus: '.vxe-switch--button',
+        tableAutoFocus: 'button',
         renderTableEdit: oldEditRender,
         renderTableDefault: oldEditRender
     }

package/es/table/src/header.js

@@ -238,6 +238,8 @@ export default defineVxeComponent({
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const headerCellOpts = computeHeaderCellOpts.value;
+            const floatingFilterOpts = computeFloatingFilterOpts.value;
+            const { cellClassName } = floatingFilterOpts;
             const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
             return cols.map((column, $columnIndex) => {
                 const { type, showHeaderOverflow, headerAlign, align, filters, editRender, cellRender, floatingFilters, filterRender, slots } = column;
@@ -291,7 +293,7 @@ export default defineVxeComponent({
                 else {
                     tcStyle.minHeight = `${currCellHeight}px`;
                 }
-                return h('th', Object.assign({ class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
+                return h('th', Object.assign({ class: ['vxe-table--column vxe-header--column is--floating-filters', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
                             [`col--${headAlign}`]: headAlign,
                             [`col--${type}`]: type,
                             'col--last': isLastColumn,
@@ -304,7 +306,7 @@ export default defineVxeComponent({
                         }
                     ], key: colid }, thAttrs), [
                     h('div', {
-                        class: ['vxe-cell', {
+                        class: ['vxe-cell', '' + (cellClassName || ''), {
                                 'c--title': showTitle,
                                 'c--tooltip': showTooltip,
                                 'c--ellipsis': showEllipsis
@@ -344,7 +346,8 @@ export default defineVxeComponent({
                 rowVNs.push(h('tr', {
                     key: 'ff',
                     class: [
-                        'vxe-header--row'
+                        'vxe-header--row is--floating-filters',
+                        '' + (floatingFilterOpts.rowClassName || '')
                     ]
                 }, renderFilterRows(isOptimizeMode, renderColumnList)));
             }

package/es/table/src/table.js

@@ -46,8 +46,10 @@ export default defineVxeComponent({
         // 使用已安装的组件，如果未安装则不渲染
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
+        const $xeModal = inject('$xeModal', null);
         const $xeTabs = inject('$xeTabs', null);
         const $xeParentTable = inject('$xeTable', null);
+        const $xeSplitter = inject('$xeSplitter', null);
         const $xeGrid = inject('$xeGrid', null);
         const $xeGantt = inject('$xeGantt', null);
         const $xeGGWrapper = $xeGrid || $xeGantt;
@@ -677,6 +679,15 @@ export default defineVxeComponent({
             }
             return [];
         });
+        const combineTabsResizeFlag = computed(() => {
+            return $xeTabs ? $xeTabs.reactData.resizeFlag : null;
+        });
+        const combineModalResizeFlag = computed(() => {
+            return $xeModal ? $xeModal.reactData.resizeFlag : null;
+        });
+        const combineSplitterResizeFlag = computed(() => {
+            return $xeSplitter ? $xeSplitter.reactData.resizeFlag : null;
+        });
         const refMaps = {
             refElem,
             refTooltip,
@@ -9086,11 +9097,39 @@ export default defineVxeComponent({
             const { tooltipStore } = reactData;
             const { column, row } = params;
             const { showAll, contentMethod } = tipOpts;
-            const customContent = contentMethod ? contentMethod(params) : null;
-            const useCustom = contentMethod && !XEUtils.eqNull(customContent);
-            const content = useCustom ? customContent : XEUtils.toString(column.type === 'html' ? tipOverEl.innerText : tipOverEl.textContent).trim();
+            const cellText = XEUtils.toString(column.type === 'html' ? tipOverEl.innerText : tipOverEl.textContent).trim();
             const isOver = tipOverEl.scrollWidth > tipOverEl.clientWidth;
-            if (content && (showAll || useCustom || isOver)) {
+            let isShow = false;
+            let customContent = null;
+            let content = '';
+            if (contentMethod) {
+                customContent = contentMethod(params);
+            }
+            // 是否全部展示
+            if (showAll) {
+                // 如果为 null 默认显示
+                if (XEUtils.eqNull(customContent)) {
+                    isShow = true;
+                    content = cellText;
+                }
+                else if (customContent !== '' && customContent !== false) {
+                    // 如果为 '' | false 则不显示
+                    isShow = true;
+                    content = '' + customContent;
+                }
+            }
+            else {
+                // 如果为 null 使用默认逻辑
+                if (XEUtils.eqNull(customContent)) {
+                    isShow = isOver;
+                }
+                else if (customContent !== '' && customContent !== false) {
+                    // 如果为 '' | false 则不显示
+                    isShow = true;
+                }
+                content = cellText;
+            }
+            if (isShow && content) {
                 const tipContent = formatText(content);
                 Object.assign(tooltipStore, {
                     row,
@@ -14158,11 +14197,19 @@ export default defineVxeComponent({
                 loadTableData(internalData.tableSynchData, false, true);
             }
         });
-        if ($xeTabs) {
-            watch(() => $xeTabs ? $xeTabs.reactData.resizeFlag : null, () => {
-                handleGlobalResizeEvent();
-            });
-        }
+        const layoutReFlag = ref(0);
+        watch(combineTabsResizeFlag, () => {
+            layoutReFlag.value++;
+        });
+        watch(combineModalResizeFlag, () => {
+            layoutReFlag.value++;
+        });
+        watch(combineSplitterResizeFlag, () => {
+            layoutReFlag.value++;
+        });
+        watch(layoutReFlag, () => {
+            handleGlobalResizeEvent();
+        });
         handleKeyField();
         hooks.forEach((options) => {
             const { setupTable } = options;

package/es/table/style.css

@@ -1923,6 +1923,7 @@
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-range-picker,
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-number-input,
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-ico-picker,
+.vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-cascader,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-input,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-textarea,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-select,
@@ -1930,14 +1931,16 @@
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-picker,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-range-picker,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-number-input,
-.vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-ico-picker {
+.vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-ico-picker,
+.vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-cascader {
   width: 100%;
 }
 
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-default-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-default-textarea, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-default-select {
   width: 100%;
 }
-.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-textarea, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-tree-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-range-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-number-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-ico-picker {
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-textarea, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-tree-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-range-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-number-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-ico-picker,
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-cascader {
   width: 100%;
 }
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-default-input,
@@ -1950,7 +1953,8 @@
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-date-picker,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-date-range-picker,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-number-input,
-.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-ico-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-default-input,
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-ico-picker,
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-cascader, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-default-input,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-default-textarea,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-default-select,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-input,
@@ -1960,14 +1964,15 @@
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-date-picker,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-date-range-picker,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-number-input,
-.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-ico-picker {
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-ico-picker,
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-cascader {
   width: 100%;
 }
 
 .vxe-table--filter-template > .vxe-default-input, .vxe-table--filter-template > .vxe-default-textarea, .vxe-table--filter-template > .vxe-default-select {
   width: 100%;
 }
-.vxe-table--filter-template > .vxe-input, .vxe-table--filter-template > .vxe-textarea, .vxe-table--filter-template > .vxe-select, .vxe-table--filter-template > .vxe-tree-select, .vxe-table--filter-template > .vxe-date-picker, .vxe-table--filter-template > .vxe-date-range-picker, .vxe-table--filter-template > .vxe-number-input, .vxe-table--filter-template > .vxe-ico-picker {
+.vxe-table--filter-template > .vxe-input, .vxe-table--filter-template > .vxe-textarea, .vxe-table--filter-template > .vxe-select, .vxe-table--filter-template > .vxe-tree-select, .vxe-table--filter-template > .vxe-date-picker, .vxe-table--filter-template > .vxe-date-range-picker, .vxe-table--filter-template > .vxe-number-input, .vxe-table--filter-template > .vxe-ico-picker, .vxe-table--filter-template > .vxe-cascader {
   width: 100%;
 }