vxe-table 3.21.14 → 3.21.16

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

@@ -478,7 +478,7 @@ function toHtml($xeTable, opts, columns, datas) {
     const internalData = $xeTable;
     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 = $xeTable.computeTreeOpts;
     const { print: isPrint, isHeader, isFooter, isColgroup, isMerge, colgroups, original } = opts;
     const allCls = 'check-all';
@@ -616,15 +616,34 @@ function toHtml($xeTable, opts, columns, datas) {
         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($xeTable, column, 'showOverflow', allColumnOverflow) ? ['col--ellipsis'] : [];
                     const cellValue = getFooterCellValue($xeTable, 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

@@ -825,14 +825,14 @@ function handleSetTreeSelectValue(renderOpts, params) {
  */
 renderer.mixin({
     input: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: nativeEditRender,
         renderTableDefault: nativeEditRender,
         renderTableFilter: nativeFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     textarea: {
-        tableAutoFocus: 'textarea',
+        tableAutoFocus: true,
         renderTableEdit: nativeEditRender
     },
     select: {
@@ -876,7 +876,7 @@ renderer.mixin({
         tableExportMethod: handleExportSelectMethod
     },
     VxeInput: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultEditRender,
         renderTableCell(h, renderOpts, params) {
             const { props = {} } = renderOpts;
@@ -916,7 +916,7 @@ renderer.mixin({
         }
     },
     VxeNumberInput: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultEditRender,
         renderTableCell: handleNumberCell,
         renderTableFooter(h, renderOpts, params) {
@@ -968,7 +968,7 @@ renderer.mixin({
         }
     },
     VxeDatePicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultEditRender,
         renderTableCell(h, renderOpts, params) {
             const props = renderOpts.props || {};
@@ -994,7 +994,7 @@ renderer.mixin({
         tableFilterDefaultMethod: handleFilterMethod
     },
     VxeDateRangePicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit(h, renderOpts, params) {
             const { startField, endField } = renderOpts;
             const { $table, row, column } = params;
@@ -1100,7 +1100,7 @@ renderer.mixin({
         }
     },
     VxeTextarea: {
-        tableAutoFocus: 'textarea',
+        tableAutoFocus: true,
         renderTableDefault: defaultEditRender,
         renderTableEdit: defaultEditRender
     },
@@ -1119,7 +1119,7 @@ renderer.mixin({
         }
     },
     VxeSelect: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultSelectEditRender,
         renderTableDefault: defaultSelectEditRender,
         renderTableCell(h, renderOpts, params) {
@@ -1234,7 +1234,7 @@ renderer.mixin({
         tableExportMethod: handleExportSelectMethod
     },
     VxeTreeSelect: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultTableOrTreeSelectEditRender,
         renderTableCell(h, renderOpts, params) {
             const { options, optionGroups } = renderOpts;
@@ -1296,8 +1296,36 @@ renderer.mixin({
         tableCellPasteMethod: handleSetTreeSelectValue,
         tableExportMethod: handleExportTreeSelectMethod
     },
+    VxeCascader: {
+        tableAutoFocus: true,
+        renderTableEdit: defaultTableOrTreeSelectEditRender,
+        renderTableCell(h, 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(h, renderOpts, params, cellResult);
+        },
+        tableCellFormatter: handleFormatTreeSelect,
+        tableCellCopyMethod: handleFormatTreeSelect,
+        tableCellPasteMethod: handleSetTreeSelectValue,
+        tableExportMethod: handleExportTreeSelectMethod
+    },
     VxeTableSelect: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit: defaultTableOrTreeSelectEditRender,
         renderTableCell(h, renderOpts, params) {
             const { options, optionGroups } = renderOpts;
@@ -1325,7 +1353,7 @@ renderer.mixin({
         tableExportMethod: handleExportTreeSelectMethod
     },
     VxeColorPicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit(h, renderOpts, params) {
             const { row, column } = params;
             const { options } = renderOpts;
@@ -1353,7 +1381,7 @@ renderer.mixin({
         }
     },
     VxeIconPicker: {
-        tableAutoFocus: 'input',
+        tableAutoFocus: true,
         renderTableEdit(h, renderOpts, params) {
             const { row, column } = params;
             const { options } = renderOpts;
@@ -1439,7 +1467,7 @@ renderer.mixin({
     },
     // 以下已废弃
     $input: {
-        tableAutoFocus: '.vxe-input--inner',
+        tableAutoFocus: 'input',
         renderTableEdit: oldEditRender,
         renderTableCell(h, renderOpts, params) {
             var _a;
@@ -1467,7 +1495,7 @@ renderer.mixin({
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     $textarea: {
-        tableAutoFocus: '.vxe-textarea--inner'
+        tableAutoFocus: 'textarea'
     },
     $button: {
         renderTableDefault: oldButtonEditRender
@@ -1476,7 +1504,7 @@ renderer.mixin({
         renderTableDefault: oldButtonsEditRender
     },
     $select: {
-        tableAutoFocus: '.vxe-input--inner',
+        tableAutoFocus: 'input',
         renderTableEdit: oldSelectEditRender,
         renderTableDefault: oldSelectEditRender,
         renderTableCell(h, renderOpts, params) {
@@ -1498,13 +1526,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

@@ -215,6 +215,8 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
+    const floatingFilterOpts = $xeTable.computeFloatingFilterOpts;
+    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;
@@ -269,7 +271,7 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
             tcStyle.minHeight = `${currCellHeight}px`;
         }
         return h('th', {
-            class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
+            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,
@@ -285,7 +287,7 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
             attrs: thAttrs
         }, [
             h('div', {
-                class: ['vxe-cell', {
+                class: ['vxe-cell', '' + (cellClassName || ''), {
                         'c--title': showTitle,
                         'c--tooltip': showTooltip,
                         'c--ellipsis': showEllipsis
@@ -330,7 +332,8 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups, renderColumn
         rowVNs.push(h('tr', {
             key: 'ff',
             class: [
-                'vxe-header--row'
+                'vxe-header--row is--floating-filters',
+                '' + (floatingFilterOpts.rowClassName || '')
             ]
         }, renderFilterRows(h, _vm, isOptimizeMode, renderColumnList)));
     }

package/es/table/src/methods.js

@@ -2862,11 +2862,39 @@ function handleTooltip($xeTable, evnt, tipOpts, type, tdEl, overflowElem, tipEle
     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,

package/es/table/src/table.js

@@ -529,6 +529,9 @@ export default {
         };
     },
     inject: {
+        $xeModal: {
+            default: null
+        },
         $xeTabs: {
             default: null
         },
@@ -548,7 +551,7 @@ export default {
         const reactData = createReactData();
         return Object.assign(Object.assign({ xID }, reactData), { 
             // 私有属性
-            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, kfFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
+            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, kfFlag: 0, layoutReFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
     },
     computed: Object.assign(Object.assign({}, {}), { tableId() {
             return this.computeTableId;
@@ -1363,11 +1366,21 @@ export default {
             const props = $xeTable;
             return Object.assign({}, getConfig().table.undoRedoHistoryConfig, props.undoRedoHistoryConfig);
         },
-        tabsResizeFlag() {
+        combineTabsResizeFlag() {
             const $xeTable = this;
             const $xeTabs = $xeTable.$xeTabs;
             return $xeTabs ? $xeTabs.reactData.resizeFlag : null;
         },
+        combineModalResizeFlag() {
+            const $xeTable = this;
+            const $xeModal = $xeTable.$xeModal;
+            return $xeModal ? $xeModal.reactData.resizeFlag : null;
+        },
+        combineSplitterResizeFlag() {
+            const $xeTable = this;
+            const $xeSplitter = $xeTable.$xeSplitter;
+            return $xeSplitter ? $xeSplitter.reactData.resizeFlag : null;
+        },
         computeVxeLanguage() {
             return VxeUI.getLanguage();
         },
@@ -1498,7 +1511,16 @@ export default {
                 });
             }
         },
-        tabsResizeFlag() {
+        combineTabsResizeFlag() {
+            this.layoutReFlag++;
+        },
+        combineModalResizeFlag() {
+            this.layoutReFlag++;
+        },
+        combineSplitterResizeFlag() {
+            this.layoutReFlag++;
+        },
+        layoutReFlag() {
             this.handleGlobalResizeEvent();
         },
         mergeCells(value) {

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%;
 }