vxe-table 4.19.10 → 4.19.12

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

@@ -25,8 +25,8 @@ export default defineVxeComponent({
             const { ctxMenuStore } = tableReactData;
             const { computeMenuOpts } = $xeTable.getComputeMaps();
             const menuOpts = computeMenuOpts.value;
-            const { transfer, destroyOnClose } = menuOpts;
-            const { visible, list, className } = ctxMenuStore;
+            const { transfer, destroyOnClose, className } = menuOpts;
+            const { visible, list } = ctxMenuStore;
             return h(Teleport, {
                 to: 'body',
                 disabled: !transfer

package/es/table/src/cell.js

@@ -932,24 +932,28 @@ export const Cell = {
         }
         return renderCellBaseVNs(params, [
             showIcon && (!visibleMethod || visibleMethod(params))
-                ? h('span', {
+                ? h('div', {
                     class: ['vxe-table--expanded', {
                             'is--active': isActive
-                        }],
-                    onMousedown(evnt) {
-                        evnt.stopPropagation();
-                    },
-                    onClick(evnt) {
-                        $table.triggerRowExpandEvent(evnt, params);
-                    }
+                        }]
                 }, [
-                    h('i', {
-                        class: ['vxe-table--expand-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
-                    })
+                    h('span', {
+                        class: 'vxe-table--expand-btn',
+                        onMousedown(evnt) {
+                            evnt.stopPropagation();
+                        },
+                        onClick(evnt) {
+                            $table.triggerRowExpandEvent(evnt, params);
+                        }
+                    }, [
+                        h('i', {
+                            class: isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))
+                        })
+                    ])
                 ])
                 : renderEmptyElement($table),
             defaultSlot || labelField
-                ? h('span', {
+                ? h('div', {
                     class: 'vxe-table--expand-label'
                 }, defaultSlot ? $table.callSlot(defaultSlot, params) : XEUtils.get(row, labelField))
                 : renderEmptyElement($table)

package/es/table/src/columnInfo.js

@@ -2,33 +2,34 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { toFilters } from './util';
 import { isEnableConf, getFuncText } from '../../ui/src/utils';
+import { isPx } from '../../ui/src/dom';
 import { warnLog, errLog } from '../../ui/src/log';
 const { getI18n, formats, renderer } = VxeUI;
 export class ColumnInfo {
     /* eslint-disable @typescript-eslint/no-use-before-define */
-    constructor($xeTable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
+    constructor($xeTable, colConfs, { renderHeader, renderCell, renderFooter, renderData } = {}) {
         const tableProps = $xeTable.props;
         const $xeGrid = $xeTable.xeGrid;
         const $xeGantt = $xeTable.xeGantt;
         const $xeGGWrapper = $xeGrid || $xeGantt;
-        const { field, editRender, filterRender } = _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 { type, field, width, visible, aggFunc, formatter, filterMultiple, cellRender, editRender, filterRender } = colConfs;
+        const colId = colConfs.colId || XEUtils.uniqueId('col_');
+        const defaultVisible = XEUtils.isBoolean(visible) ? visible : true;
+        const defaultRenderWidth = width && isPx(width) && width !== 'auto' ? Math.max(0, XEUtils.toInteger(width)) : 0;
+        const flCompConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
         const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null;
-        const filters = toFilters(_vm.filters, colId);
+        const filters = toFilters(colConfs.filters, colId);
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
-        if (_vm.type && types.indexOf(_vm.type) === -1) {
-            warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);
+        if (type && types.indexOf(type) === -1) {
+            warnLog('vxe.error.errProp', [`type=${type}`, types.join(', ')]);
         }
-        if (XEUtils.isBoolean(_vm.cellRender) || (_vm.cellRender && !XEUtils.isObject(_vm.cellRender))) {
-            warnLog('vxe.error.errProp', [`column.cell-render=${_vm.cellRender}`, 'column.cell-render={}']);
+        if (XEUtils.isBoolean(cellRender) || (cellRender && !XEUtils.isObject(cellRender))) {
+            warnLog('vxe.error.errProp', [`column.cell-render=${cellRender}`, 'column.cell-render={}']);
         }
-        if (XEUtils.isBoolean(_vm.editRender) || (_vm.editRender && !XEUtils.isObject(_vm.editRender))) {
-            warnLog('vxe.error.errProp', [`column.edit-render=${_vm.editRender}`, 'column.edit-render={}']);
+        if (XEUtils.isBoolean(editRender) || (editRender && !XEUtils.isObject(editRender))) {
+            warnLog('vxe.error.errProp', [`column.edit-render=${editRender}`, 'column.edit-render={}']);
         }
-        if (_vm.type === 'expand') {
+        if (type === 'expand') {
             const { treeConfig } = tableProps;
             const { computeTreeOpts } = $xeTable.getComputeMaps();
             const treeOpts = computeTreeOpts.value;
@@ -50,9 +51,9 @@ export class ColumnInfo {
                 }
             }
         }
-        if (_vm.aggFunc) {
-            if (!$xeTable.handlePivotTableAggData && _vm.aggFunc !== true) {
-                errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true']);
+        if (aggFunc) {
+            if (!$xeTable.handlePivotTableAggData && aggFunc !== true) {
+                errLog('vxe.error.errProp', [`column.agg-func=${aggFunc}`, 'column.agg-func=true']);
             }
         }
         if (field && editRender) {
@@ -65,71 +66,70 @@ export class ColumnInfo {
         }
         Object.assign(this, {
             // 基本属性
-            type: _vm.type,
-            property: _vm.field,
+            type: colConfs.type,
+            property: colConfs.field,
             field: field,
-            title: _vm.title,
-            width: _vm.width,
-            minWidth: _vm.minWidth,
-            maxWidth: _vm.maxWidth,
-            resizable: _vm.resizable,
-            fixed: _vm.fixed,
-            align: _vm.align,
-            headerAlign: _vm.headerAlign,
-            footerAlign: _vm.footerAlign,
-            showOverflow: _vm.showOverflow,
-            showHeaderOverflow: _vm.showHeaderOverflow,
-            showFooterOverflow: _vm.showFooterOverflow,
-            className: _vm.className,
-            headerClassName: _vm.headerClassName,
-            footerClassName: _vm.footerClassName,
+            title: colConfs.title,
+            width: colConfs.width,
+            minWidth: colConfs.minWidth,
+            maxWidth: colConfs.maxWidth,
+            resizable: colConfs.resizable,
+            fixed: colConfs.fixed,
+            align: colConfs.align,
+            headerAlign: colConfs.headerAlign,
+            footerAlign: colConfs.footerAlign,
+            showOverflow: colConfs.showOverflow,
+            showHeaderOverflow: colConfs.showHeaderOverflow,
+            showFooterOverflow: colConfs.showFooterOverflow,
+            className: colConfs.className,
+            headerClassName: colConfs.headerClassName,
+            footerClassName: colConfs.footerClassName,
             formatter: formatter,
-            headerFormatter: _vm.headerFormatter,
-            footerFormatter: _vm.footerFormatter,
-            padding: _vm.padding,
-            verticalAlign: _vm.verticalAlign,
-            sortable: _vm.sortable,
-            sortBy: _vm.sortBy,
-            sortType: _vm.sortType,
+            headerFormatter: colConfs.headerFormatter,
+            footerFormatter: colConfs.footerFormatter,
+            padding: colConfs.padding,
+            verticalAlign: colConfs.verticalAlign,
+            sortable: colConfs.sortable,
+            sortBy: colConfs.sortBy,
+            sortType: colConfs.sortType,
             filters: filters,
-            filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
-            filterMethod: _vm.filterMethod,
-            filterResetMethod: _vm.filterResetMethod,
-            filterRecoverMethod: _vm.filterRecoverMethod,
+            filterMultiple: XEUtils.isBoolean(filterMultiple) ? filterMultiple : true,
+            filterMethod: colConfs.filterMethod,
+            filterResetMethod: colConfs.filterResetMethod,
+            filterRecoverMethod: colConfs.filterRecoverMethod,
             filterRender: filterRender,
-            floatingFilters: _vm.floatingFilters,
-            rules: _vm.rules,
-            rowGroupNode: _vm.rowGroupNode,
-            treeNode: _vm.treeNode,
-            dragSort: _vm.dragSort,
-            rowResize: _vm.rowResize,
-            cellType: _vm.cellType,
-            cellRender: _vm.cellRender,
+            floatingFilters: colConfs.floatingFilters,
+            rules: colConfs.rules,
+            rowGroupNode: colConfs.rowGroupNode,
+            treeNode: colConfs.treeNode,
+            dragSort: colConfs.dragSort,
+            rowResize: colConfs.rowResize,
+            cellType: colConfs.cellType,
+            cellRender: cellRender,
             editRender: editRender,
-            contentRender: _vm.contentRender,
-            headerExportMethod: _vm.headerExportMethod,
-            exportMethod: _vm.exportMethod,
-            footerExportMethod: _vm.footerExportMethod,
-            titleHelp: _vm.titleHelp,
-            titlePrefix: _vm.titlePrefix,
-            titleSuffix: _vm.titleSuffix,
-            aggFunc: _vm.aggFunc,
-            copyMethod: _vm.copyMethod,
-            cutMethod: _vm.cutMethod,
-            pasteMethod: _vm.pasteMethod,
+            contentRender: colConfs.contentRender,
+            headerExportMethod: colConfs.headerExportMethod,
+            exportMethod: colConfs.exportMethod,
+            footerExportMethod: colConfs.footerExportMethod,
+            titleHelp: colConfs.titleHelp,
+            titlePrefix: colConfs.titlePrefix,
+            titleSuffix: colConfs.titleSuffix,
+            aggFunc: colConfs.aggFunc,
+            copyMethod: colConfs.copyMethod,
+            cutMethod: colConfs.cutMethod,
+            pasteMethod: colConfs.pasteMethod,
             // 自定义参数
-            params: _vm.params,
+            params: colConfs.params,
             // 渲染属性
             id: colId,
             parentId: null,
-            visible,
+            visible: defaultVisible,
             // 内部属性（一旦被使用，将导致不可升级版本）
             defaultParentId: null,
             halfVisible: false,
-            defaultVisible: visible,
-            defaultFixed: _vm.fixed,
-            defaultAggGroup: _vm.aggGroup,
-            defaultAggFunc: _vm.aggFunc,
+            defaultVisible: defaultVisible,
+            defaultFixed: colConfs.fixed,
+            defaultAggFunc: colConfs.aggFunc,
             checked: false,
             halfChecked: false,
             disabled: false,
@@ -150,7 +150,7 @@ export class ColumnInfo {
             renderAggFormat: null,
             renderFixed: '',
             renderVisible: false,
-            renderWidth: 0,
+            renderWidth: defaultRenderWidth,
             renderHeight: 0,
             renderResizeWidth: 0,
             renderAutoWidth: 0,
@@ -158,12 +158,12 @@ export class ColumnInfo {
             renderLeft: 0,
             renderArgs: [],
             model: {},
-            renderHeader: renderHeader || _vm.renderHeader,
-            renderCell: renderCell || _vm.renderCell,
-            renderFooter: renderFooter || _vm.renderFooter,
+            renderHeader: renderHeader || colConfs.renderHeader,
+            renderCell: renderCell || colConfs.renderCell,
+            renderFooter: renderFooter || colConfs.renderFooter,
             renderData: renderData,
             // 单元格插槽，只对 grid 有效
-            slots: _vm.slots
+            slots: colConfs.slots
         });
         if (ctFilterOptions && (!filters || !filters.length)) {
             this.filters = toFilters(ctFilterOptions({ $table: $xeTable, column: this }), colId);
@@ -180,8 +180,8 @@ export class ColumnInfo {
         return getFuncText(this.title || (this.type === 'seq' ? getI18n('vxe.table.seqTitle') : ''));
     }
     getKey() {
-        const { type } = this;
-        return this.field || (type ? `type=${type}` : null);
+        const { type, field } = this;
+        return field || (type ? `type=${type}` : null);
     }
     update(name, value) {
         // 不支持直接修改的属性

package/es/table/src/table.js

@@ -1726,9 +1726,9 @@ export default defineVxeComponent({
                 if (expandOpts.mode !== 'inside' && (treeConfig && !treeOpts.transform)) {
                     errLog('vxe.error.notConflictProp', ['tree-config.transform=false', 'expand-config.mode=inside']);
                 }
-                if (props.spanMethod) {
-                    warnLog('vxe.error.notSupportProp', ['column.type=expand', 'span-method', 'span-method=null']);
-                }
+                // if (props.spanMethod) {
+                //   warnLog('vxe.error.notSupportProp', ['column.type=expand', 'span-method', 'span-method=null'])
+                // }
             }
             if (htmlColumn) {
                 if (!columnOpts.useKey) {

package/es/table/style.css

@@ -3563,6 +3563,10 @@
 .vxe-table--render-default {
   /*展开行*/
 }
+.vxe-table--render-default .vxe-body--column.col--expand > .vxe-cell .vxe-cell--wrapper {
+  display: flex;
+  flex-direction: row;
+}
 .vxe-table--render-default .vxe-table--row-expanded-wrapper {
   position: absolute;
   top: 0;
@@ -3594,23 +3598,31 @@
   border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
 .vxe-table--render-default .vxe-table--expanded {
-  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 .vxe-table--render-default .vxe-table--expanded .vxe-table--expand-btn {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  text-align: center;
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   color: var(--vxe-ui-font-lighten-color);
-  transition: transform 0.1s ease-in-out;
 }
 .vxe-table--render-default .vxe-table--expanded .vxe-table--expand-btn:hover {
   color: var(--vxe-ui-font-color);
 }
+.vxe-table--render-default .vxe-table--expanded .vxe-table--expand-btn i {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1em;
+  transition: transform 0.1s ease-in-out;
+}
 .vxe-table--render-default .vxe-table--expanded + .vxe-table--expand-label {
+  flex-grow: 1;
   padding-left: 0.5em;
 }
 .vxe-table--render-default .vxe-body--expanded-row.is--padding > .vxe-body--expanded-column > .vxe-body--expanded-cell {