vxe-table 3.14.0-beta.8 → 3.14.0

package/es/table/src/cell.js

@@ -304,7 +304,7 @@ function renderFooterHandle(h, params) {
     return Cell.renderDefaultFooter(h, params);
 }
 export const Cell = {
-    createColumn($xetable, _vm) {
+    createColumn($xeTable, _vm) {
         const { type } = _vm;
         const renConfs = {
             renderHeader: renderHeaderHandle,
@@ -314,7 +314,7 @@ export const Cell = {
         if (type === 'expand') {
             renConfs.renderData = Cell.renderExpandData;
         }
-        return createColumn($xetable, _vm, renConfs);
+        return createColumn($xeTable, _vm, renConfs);
     },
     /**
      * 列头标题
@@ -382,8 +382,8 @@ export const Cell = {
         const { $table, isHidden } = params;
         const tableReactData = $table;
         const tableInternalData = $table;
-        const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData;
-        const { fullAllDataRowIdData } = tableInternalData;
+        const { treeExpandedFlag } = tableReactData;
+        const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData;
         const treeOpts = $table.computeTreeOpts;
         const { row, column, level } = params;
         const { slots } = column;
@@ -403,7 +403,7 @@ export const Cell = {
         }
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isActive = !!treeExpandedMaps[rowid];
+            isActive = !!treeExpandedFlag && !!treeExpandedMaps[rowid];
             if (lazy) {
                 const rest = fullAllDataRowIdData[rowid];
                 isLazyLoading = !!treeExpandLazyLoadedMaps[rowid];
@@ -551,7 +551,8 @@ export const Cell = {
         const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
         const checkboxOpts = $table.computeCheckboxOpts;
-        const headerTitle = column.getTitle();
+        const { checkStrictly, showHeader, headerTitle } = checkboxOpts;
+        const colTitle = column.getTitle();
         const ons = {};
         if (!isHidden) {
             ons.click = (evnt) => {
@@ -564,11 +565,11 @@ export const Cell = {
         if (headerSlot) {
             return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)));
         }
-        if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+        if (checkStrictly ? !showHeader : showHeader === false) {
             return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
                 h('span', {
                     class: 'vxe-checkbox--label'
-                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
+                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : colTitle)
             ]));
         }
         return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
@@ -579,18 +580,18 @@ export const Cell = {
                         'is--indeterminate': isAllCheckboxIndeterminate
                     }],
                 attrs: {
-                    title: getI18n('vxe.table.allTitle')
+                    title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}`
                 },
                 on: ons
             }, [
                 h('span', {
                     class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
                 })
-            ].concat(titleSlot || headerTitle
+            ].concat(titleSlot || colTitle
                 ? [
                     h('span', {
                         class: 'vxe-checkbox--label'
-                    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
+                    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : colTitle)
                 ]
                 : []))
         ]));
@@ -599,8 +600,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table;
         const tableReactData = $table;
+        const tableInternalData = $table;
         const { treeConfig } = tableProps;
-        const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { labelField, checkMethod, visibleMethod } = checkboxOpts;
         const { slots } = column;
@@ -613,7 +616,7 @@ export const Cell = {
         const ons = {};
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isChecked = !!selectCheckboxMaps[rowid];
+            isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid];
             ons.click = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -623,7 +626,7 @@ export const Cell = {
                 isDisabled = !checkMethod({ row });
             }
             if (treeConfig) {
-                indeterminate = !!treeIndeterminateMaps[rowid];
+                indeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate });
@@ -660,8 +663,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table;
         const tableReactData = $table;
+        const tableInternalData = $table;
         const { treeConfig } = tableProps;
-        const { treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { treeIndeterminateRowMaps } = tableInternalData;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts;
         const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField;
@@ -675,7 +680,7 @@ export const Cell = {
         const ons = {};
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isChecked = XEUtils.get(row, checkField);
+            isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField);
             ons.click = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -685,7 +690,7 @@ export const Cell = {
                 isDisabled = !checkMethod({ row });
             }
             if (treeConfig) {
-                isIndeterminate = !!treeIndeterminateMaps[rowid];
+                isIndeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate });
@@ -723,8 +728,8 @@ export const Cell = {
      */
     renderExpandCell(h, params) {
         const { $table, isHidden, row, column } = params;
-        const tableReactData = $table;
-        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData;
+        const tableInternalData = $table;
+        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData;
         const expandOpts = $table.computeExpandOpts;
         const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts;
         const { slots } = column;
@@ -820,7 +825,7 @@ export const Cell = {
     renderSortIcon(h, params) {
         const { $table, column } = params;
         const sortOpts = $table.computeSortOpts;
-        const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
+        const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
         if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
             return [
                 h('span', {
@@ -831,7 +836,7 @@ export const Cell = {
                                 'sort--active': column.order === 'asc'
                             }],
                         attrs: {
-                            title: getI18n('vxe.table.sortAsc')
+                            title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`
                         },
                         on: allowBtn
                             ? {
@@ -847,7 +852,7 @@ export const Cell = {
                                 'sort--active': column.order === 'desc'
                             }],
                         attrs: {
-                            title: getI18n('vxe.table.sortDesc')
+                            title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`
                         },
                         on: allowBtn
                             ? {

package/es/table/src/column.js

@@ -131,14 +131,15 @@ export const columnProps = {
 export const columnWatch = {};
 Object.keys(columnProps).forEach(name => {
     columnWatch[name] = function (value) {
+        const $xeTable = this.$xeTable;
         this.columnConfig.update(name, value);
-        if (this.$xetable) {
+        if ($xeTable) {
             if (name === 'filters') {
-                this.$xetable.setFilter(this.columnConfig, value);
-                this.$xetable.handleUpdateDataQueue();
+                $xeTable.setFilter(this.columnConfig, value);
+                $xeTable.handleUpdateDataQueue();
             }
             else if (['visible', 'fixed', 'width', 'minWidth', 'maxWidth'].includes(name)) {
-                this.$xetable.handleRefreshColumnQueue();
+                $xeTable.handleRefreshColumnQueue();
             }
         }
     };
@@ -148,21 +149,22 @@ export default {
     props: columnProps,
     provide() {
         return {
-            $xecolumn: this,
-            $xegrid: null
+            $xeColumn: this,
+            $xeGrid: null
         };
     },
     inject: {
-        $xetable: {
+        $xeTable: {
             default: null
         },
-        $xecolumn: {
+        $xeColumn: {
             default: null
         }
     },
     watch: columnWatch,
     created() {
-        this.columnConfig = this.createColumn(this.$xetable, this);
+        const $xeTable = this.$xeTable;
+        this.columnConfig = this.createColumn($xeTable, this);
     },
     mounted() {
         this.columnConfig.slots = this.$scopedSlots;

package/es/table/src/columnInfo.js

@@ -6,12 +6,12 @@ import { warnLog, errLog } from '../../ui/src/log';
 const { getI18n, formats } = VxeUI;
 export class ColumnInfo {
     /* eslint-disable @typescript-eslint/no-use-before-define */
-    constructor($xetable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
-        const $xegrid = $xetable.$xegrid;
-        const proxyOpts = $xegrid ? $xegrid.proxyOpts : null;
+    constructor($xeTable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
+        const tableProps = $xeTable;
+        const $xeGrid = $xeTable.$xeGrid;
+        const proxyOpts = $xeGrid ? $xeGrid.proxyOpts : null;
         const formatter = _vm.formatter;
         const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
-        const tableProps = $xetable;
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
         if (_vm.type && types.indexOf(_vm.type) === -1) {
             warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);
@@ -24,7 +24,7 @@ export class ColumnInfo {
         }
         if (_vm.type === 'expand') {
             const { treeConfig } = tableProps;
-            if (treeConfig && ($xetable.treeOpts.showLine || $xetable.treeOpts.line)) {
+            if (treeConfig && ($xeTable.treeOpts.showLine || $xeTable.treeOpts.line)) {
                 errLog('vxe.error.errConflicts', ['tree-config.line', 'column.type=expand']);
             }
         }
@@ -136,7 +136,7 @@ export class ColumnInfo {
             slots: _vm.slots
         });
         if (proxyOpts && proxyOpts.beforeColumn) {
-            proxyOpts.beforeColumn({ $grid: $xegrid, column: this });
+            proxyOpts.beforeColumn({ $grid: $xeGrid, column: this });
         }
     }
     getTitle() {

package/es/table/src/footer.js

@@ -24,10 +24,11 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
+    const $xeGrid = $xeTable.$xeGrid;
     const { fixedType } = props;
     const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
     const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFooterList } = tableReactData;
-    const { scrollXStore } = tableInternalData;
+    const { fullColumnIdData, scrollXStore } = tableInternalData;
     const tooltipOpts = $xeTable.computeTooltipOpts;
     const { isAllColumnDrag } = $xeTable.resizableOpts;
     const columnOpts = $xeTable.computeColumnOpts;
@@ -38,6 +39,7 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
     return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
         const colid = column.id;
+        const colRest = fullColumnIdData[colid] || {};
         const renderOpts = editRender || cellRender;
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
         const showAllTip = tooltipOpts.showAll;
@@ -53,12 +55,12 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const attrs = { colid };
         const tfOns = {};
-        const columnIndex = $xeTable.getColumnIndex(column);
-        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const columnIndex = colRest.index;
+        const _columnIndex = colRest._index;
         const itemIndex = _columnIndex;
         const cellParams = {
             $table: $xeTable,
-            $grid: $xeTable.xegrid,
+            $grid: $xeGrid,
             row,
             rowIndex: _rowIndex,
             _rowIndex,
@@ -293,7 +295,7 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
-        const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
+        const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
         let renderColumnList = tableColumn;
         let isOptimizeMode = false;
         // 如果是使用优化模式
@@ -305,7 +307,7 @@ export default {
                 isOptimizeMode = true;
             }
         }
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
             renderColumnList = visibleColumn;
         }
         if (fixedType) {
@@ -380,7 +382,10 @@ export default {
                             attrs: {
                                 name: column.id
                             },
-                            key: $columnIndex
+                            key: $columnIndex,
+                            style: {
+                                width: `${column.renderWidth}px`
+                            }
                         });
                     })),
                     /**

package/es/table/src/group.js

@@ -7,21 +7,22 @@ export default {
     props: columnProps,
     provide() {
         return {
-            $xecolumn: this,
-            $xegrid: null
+            $xeColumn: this,
+            $xeGrid: null
         };
     },
     inject: {
-        $xetable: {
+        $xeTable: {
             default: null
         },
-        $xecolumn: {
+        $xeColumn: {
             default: null
         }
     },
     watch: columnWatch,
     created() {
-        this.columnConfig = this.createColumn(this.$xetable, this);
+        const $xeTable = this.$xeTable;
+        this.columnConfig = this.createColumn($xeTable, this);
     },
     mounted() {
         const { $scopedSlots } = this;

package/es/table/src/header.js

@@ -7,14 +7,14 @@ const cellType = 'header';
 const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const props = _vm;
     const $xeTable = _vm.$parent;
-    const $xeGrid = $xeTable.xegrid;
+    const $xeGrid = $xeTable.$xeGrid;
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     const { fixedType } = props;
     const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
     const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData;
-    const { scrollXStore } = tableInternalData;
+    const { fullColumnIdData, scrollXStore } = tableInternalData;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const cellOpts = $xeTable.computeCellOpts;
@@ -26,6 +26,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;
         // const { enabled } = tooltipOpts
         const colid = column.id;
+        const colRest = fullColumnIdData[colid] || {};
         const renderOpts = editRender || cellRender;
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
         const isColGroup = column.children && column.children.length;
@@ -43,8 +44,8 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             firstFilterOption = filters[0];
             hasFilter = filters.some((item) => item.checked);
         }
-        const columnIndex = $xeTable.getColumnIndex(column);
-        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const columnIndex = colRest.index;
+        const _columnIndex = colRest._index;
         const cellParams = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter };
         const thAttrs = {
             colid,
@@ -252,7 +253,7 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { headerColumn } = this;
         const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
-        const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
+        const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
         const mouseOpts = $xeTable.computeMouseOpts;
         let renderHeaderList = headerColumn;
@@ -271,7 +272,7 @@ export default {
                     isOptimizeMode = true;
                 }
             }
-            if (fixedType || !overflowX) {
+            if (!isColLoading && (fixedType || !overflowX)) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {
@@ -351,7 +352,10 @@ export default {
                             attrs: {
                                 name: column.id
                             },
-                            key: $columnIndex
+                            key: $columnIndex,
+                            style: {
+                                width: `${column.renderWidth}px`
+                            }
                         });
                     })),
                     /**
@@ -390,8 +394,10 @@ export default {
     },
     methods: {
         uploadColumn() {
-            const { $parent: $xetable } = this;
-            this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
+            const $xeTable = this.$parent;
+            const tableReactData = $xeTable;
+            const { isGroup } = tableReactData;
+            this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
         }
     }
 };