vxe-table 4.12.0-beta.2 → 4.12.0-beta.21

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

@@ -84,14 +84,24 @@ export default defineComponent({
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, $xeTable.callSlot(filterSlot, params))
                 ];
             }
             else if (rtFilter) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, getSlotVNs(rtFilter(filterRender, params)))
                 ];
             }

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

@@ -28,7 +28,7 @@ hooks.add('tableKeyboardModule', {
     setupTable($xeTable) {
         const { props, reactData, internalData } = $xeTable;
         const { refElem } = $xeTable.getRefMaps();
-        const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
+        const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeColumnOpts, computeCellOpts, computeDefaultRowHeight, computeCurrentRowOpts, computeCurrentColumnOpts } = $xeTable.getComputeMaps();
         function getCheckboxRangeRows(evnt, params, targetTrElem, trRect, offsetClientTop, moveRange) {
             const { showOverflow } = props;
             const { fullAllDataRowIdData, isResizeCellHeight } = internalData;
@@ -287,6 +287,10 @@ hooks.add('tableKeyboardModule', {
                 const { editConfig } = props;
                 const { afterFullData, visibleColumn } = internalData;
                 const editOpts = computeEditOpts.value;
+                const rowOpts = computeRowOpts.value;
+                const currentRowOpts = computeCurrentRowOpts.value;
+                const columnOpts = computeColumnOpts.value;
+                const currentColumnOpts = computeCurrentColumnOpts.value;
                 let targetRow;
                 let targetRowIndex;
                 let targetColumnIndex;
@@ -333,6 +337,12 @@ hooks.add('tableKeyboardModule', {
                     params.columnIndex = targetColumnIndex;
                     params.column = targetColumn;
                     params.cell = $xeTable.getCellElement(params.row, params.column);
+                    if (rowOpts.isCurrent && currentRowOpts.isFollowSelected) {
+                        $xeTable.triggerCurrentRowEvent(evnt, params);
+                    }
+                    if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+                        $xeTable.triggerCurrentColumnEvent(evnt, params);
+                    }
                     if (editConfig) {
                         if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
                             if (editOpts.mode === 'row') {
@@ -340,13 +350,17 @@ hooks.add('tableKeyboardModule', {
                             }
                             else {
                                 $xeTable.scrollToRow(params.row, params.column)
-                                    .then(() => $xeTable.handleSelected(params, evnt));
+                                    .then(() => {
+                                    $xeTable.handleSelected(params, evnt);
+                                });
                             }
                         }
                     }
                     else {
                         $xeTable.scrollToRow(params.row, params.column)
-                            .then(() => $xeTable.handleSelected(params, evnt));
+                            .then(() => {
+                            $xeTable.handleSelected(params, evnt);
+                        });
                     }
                 }
             },
@@ -358,7 +372,6 @@ hooks.add('tableKeyboardModule', {
                 const treeOpts = computeTreeOpts.value;
                 const childrenField = treeOpts.children || treeOpts.childrenField;
                 let targetRow;
-                evnt.preventDefault();
                 if (currentRow) {
                     if (treeConfig) {
                         const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField });
@@ -383,6 +396,7 @@ hooks.add('tableKeyboardModule', {
                     targetRow = afterFullData[0];
                 }
                 if (targetRow) {
+                    evnt.preventDefault();
                     const params = {
                         $table: $xeTable,
                         row: targetRow,
@@ -393,6 +407,35 @@ hooks.add('tableKeyboardModule', {
                         .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
                 }
             },
+            // 处理当前列方向键移动
+            moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
+                const { currentColumn } = reactData;
+                const { visibleColumn } = internalData;
+                let targetCol = null;
+                if (currentColumn) {
+                    const _columnIndex = $xeTable.getVTColumnIndex(currentColumn);
+                    if (isLeftArrow && _columnIndex > 0) {
+                        targetCol = visibleColumn[_columnIndex - 1];
+                    }
+                    else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+                        targetCol = visibleColumn[_columnIndex + 1];
+                    }
+                }
+                else {
+                    targetCol = visibleColumn[0];
+                }
+                if (targetCol) {
+                    evnt.preventDefault();
+                    const params = {
+                        $table: $xeTable,
+                        column: targetCol,
+                        columnIndex: $xeTable.getColumnIndex(targetCol),
+                        $columnIndex: $xeTable.getVMColumnIndex(targetCol)
+                    };
+                    $xeTable.scrollToColumn(targetCol)
+                        .then(() => $xeTable.triggerCurrentColumnEvent(evnt, params));
+                }
+            },
             // 处理可编辑方向键移动
             moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
                 const { afterFullData, visibleColumn } = internalData;

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

@@ -85,8 +85,8 @@ hooks.add('tableValidatorModule', {
         const beginValidate = (rows, cols, cb, isFull) => {
             const validRest = {};
             const { editRules, treeConfig } = props;
-            const { editStore, pendingRowMaps } = reactData;
-            const { afterFullData } = internalData;
+            const { editStore } = reactData;
+            const { afterFullData, pendingRowMaps } = internalData;
             const { removeMaps } = editStore;
             const treeOpts = computeTreeOpts.value;
             const childrenField = treeOpts.children || treeOpts.childrenField;

package/es/table/render/index.js

@@ -5,7 +5,7 @@ import { getCellValue, setCellValue } from '../../table/src/util';
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils';
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn';
 import { errLog } from '../../ui/src/log';
-const { getConfig, renderer, getI18n } = VxeUI;
+const { getConfig, renderer, getI18n, getComponent } = VxeUI;
 const componentDefaultModelProp = 'modelValue';
 const defaultCompProps = {};
 function handleDefaultValue(value, defaultVal, initVal) {
@@ -29,7 +29,7 @@ function getOldComponentName(name) {
     return `vxe-${name.replace('$', '')}`;
 }
 function getDefaultComponent({ name }) {
-    return resolveComponent(name);
+    return getComponent(name);
 }
 /**
  * 已废弃
@@ -335,7 +335,7 @@ function oldEditRender(renderOpts, params) {
  */
 function oldButtonEditRender(renderOpts, params) {
     return [
-        h(resolveComponent('vxe-button'), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
+        h(getComponent('vxe-button'), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
     ];
 }
 /**
@@ -500,6 +500,63 @@ function handleExportTreeSelectMethod(params) {
     const { row, column, options } = params;
     return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params);
 }
+function handleNumberCell(renderOpts, params) {
+    const { props = {}, showNegativeStatus } = renderOpts;
+    const { row, column } = params;
+    const { type } = props;
+    let cellValue = XEUtils.get(row, column.field);
+    let isNegative = false;
+    if (!isEmptyValue(cellValue)) {
+        const numberInputConfig = getConfig().numberInput || {};
+        if (type === 'float') {
+            const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
+            const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1);
+            cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits);
+            if (!autoFill) {
+                cellValue = XEUtils.toNumber(cellValue);
+            }
+            if (showNegativeStatus) {
+                if (cellValue < 0) {
+                    isNegative = true;
+                }
+            }
+        }
+        else if (type === 'amount') {
+            const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
+            const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2);
+            const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false);
+            cellValue = XEUtils.toNumber(cellValue);
+            if (showNegativeStatus) {
+                if (cellValue < 0) {
+                    isNegative = true;
+                }
+            }
+            cellValue = XEUtils.commafy(cellValue, { digits });
+            if (!autoFill) {
+                const [iStr, dStr] = cellValue.split('.');
+                if (dStr) {
+                    const dRest = dStr.replace(/0+$/, '');
+                    cellValue = dRest ? [iStr, '.', dRest].join('') : iStr;
+                }
+            }
+            if (showCurrency) {
+                cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`;
+            }
+        }
+        else {
+            if (showNegativeStatus) {
+                if (XEUtils.toNumber(cellValue) < 0) {
+                    isNegative = true;
+                }
+            }
+        }
+    }
+    return getCellLabelVNs(renderOpts, params, cellValue, isNegative
+        ? {
+            class: 'is--negative'
+        }
+        : {});
+}
 /**
  * 表格 - 渲染器
  */
@@ -559,66 +616,19 @@ renderer.mixin({
         renderTableFilter: defaultFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod
     },
+    FormatNumberInput: {
+        renderTableDefault: handleNumberCell,
+        tableFilterDefaultMethod: handleInputFilterMethod,
+        tableExportMethod(params) {
+            const { row, column } = params;
+            const cellValue = XEUtils.get(row, column.field);
+            return cellValue;
+        }
+    },
     VxeNumberInput: {
         tableAutoFocus: 'input',
         renderTableEdit: defaultEditRender,
-        renderTableCell(renderOpts, params) {
-            const { props = {}, showNegativeStatus } = renderOpts;
-            const { row, column } = params;
-            const { type } = props;
-            let cellValue = XEUtils.get(row, column.field);
-            let isNegative = false;
-            if (!isEmptyValue(cellValue)) {
-                const numberInputConfig = getConfig().numberInput || {};
-                if (type === 'float') {
-                    const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
-                    const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1);
-                    cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits);
-                    if (!autoFill) {
-                        cellValue = XEUtils.toNumber(cellValue);
-                    }
-                    if (showNegativeStatus) {
-                        if (cellValue < 0) {
-                            isNegative = true;
-                        }
-                    }
-                }
-                else if (type === 'amount') {
-                    const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true);
-                    const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2);
-                    const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false);
-                    cellValue = XEUtils.toNumber(cellValue);
-                    if (showNegativeStatus) {
-                        if (cellValue < 0) {
-                            isNegative = true;
-                        }
-                    }
-                    cellValue = XEUtils.commafy(cellValue, { digits });
-                    if (!autoFill) {
-                        const [iStr, dStr] = cellValue.split('.');
-                        if (dStr) {
-                            const dRest = dStr.replace(/0+$/, '');
-                            cellValue = dRest ? [iStr, '.', dRest].join('') : iStr;
-                        }
-                    }
-                    if (showCurrency) {
-                        cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`;
-                    }
-                }
-                else {
-                    if (showNegativeStatus) {
-                        if (XEUtils.toNumber(cellValue) < 0) {
-                            isNegative = true;
-                        }
-                    }
-                }
-            }
-            return getCellLabelVNs(renderOpts, params, cellValue, isNegative
-                ? {
-                    class: 'is--negative'
-                }
-                : {});
-        },
+        renderTableCell: handleNumberCell,
         renderTableFooter(renderOpts, params) {
             const { props = {} } = renderOpts;
             const { row, column, _columnIndex } = params;
@@ -721,11 +731,22 @@ renderer.mixin({
         tableFilterDefaultMethod: handleFilterMethod,
         tableExportMethod: handleExportSelectMethod
     },
+    /**
+     * 已废弃，被 FormatSelect 替换
+     * @deprecated
+     */
     formatOption: {
         renderTableDefault(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
         }
     },
+    FormatSelect: {
+        renderTableDefault(renderOpts, params) {
+            return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
+        },
+        tableFilterDefaultMethod: handleFilterMethod,
+        tableExportMethod: handleExportSelectMethod
+    },
     VxeTreeSelect: {
         tableAutoFocus: 'input',
         renderTableEdit: defaultTableOrTreeSelectEditRender,
@@ -734,11 +755,21 @@ renderer.mixin({
         },
         tableExportMethod: handleExportTreeSelectMethod
     },
+    /**
+     * 已废弃，被 FormatTreeSelect 替换
+     * @deprecated
+     */
     formatTree: {
         renderTableDefault(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params));
         }
     },
+    FormatTreeSelect: {
+        renderTableDefault(renderOpts, params) {
+            return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params));
+        },
+        tableExportMethod: handleExportTreeSelectMethod
+    },
     VxeTableSelect: {
         tableAutoFocus: 'input',
         renderTableEdit: defaultTableOrTreeSelectEditRender,

package/es/table/src/body.js

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util';
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util';
 import { updateCellTitle, getPropClass } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -36,7 +36,7 @@ export default defineComponent({
             const { lastScrollTime, isDragResize } = tableReactData;
             return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
         };
-        const renderLine = (params, cellHeight) => {
+        const renderLine = (rowid, params, cellHeight) => {
             const { row, column } = params;
             const { afterFullData } = tableInternalData;
             const { treeConfig } = tableProps;
@@ -46,7 +46,6 @@ export default defineComponent({
             if (slots && slots.line) {
                 return $xeTable.callSlot(slots.line, params);
             }
-            const rowid = getRowid($xeTable, row);
             const rest = fullAllDataRowIdData[rowid];
             let rLevel = 0;
             let prevRow = null;
@@ -205,6 +204,7 @@ export default defineComponent({
             tdOns.onDblclick = (evnt) => {
                 $xeTable.triggerCellDblclickEvent(evnt, cellParams);
             };
+            let isMergeCell = false;
             // 合并行或列
             if (mergeList.length) {
                 const spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex);
@@ -214,9 +214,11 @@ export default defineComponent({
                         return null;
                     }
                     if (rowspan > 1) {
+                        isMergeCell = true;
                         tdAttrs.rowspan = rowspan;
                     }
                     if (colspan > 1) {
+                        isMergeCell = true;
                         tdAttrs.colspan = colspan;
                     }
                 }
@@ -249,12 +251,14 @@ export default defineComponent({
             const isLastColumn = $columnIndex === columns.length - 1;
             const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
             let isVNPreEmptyStatus = false;
-            if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-                if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
-                    isVNPreEmptyStatus = true;
-                }
-                else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-                    isVNPreEmptyStatus = true;
+            if (!isMergeCell) {
+                if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
+                    if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+                        isVNPreEmptyStatus = true;
+                    }
+                    else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                        isVNPreEmptyStatus = true;
+                    }
                 }
             }
             const tcStyle = {};
@@ -278,7 +282,7 @@ export default defineComponent({
             }
             else {
                 // 渲染单元格
-                tdVNs.push(...renderLine(cellParams, cellHeight), h('div', {
+                tdVNs.push(...renderLine(rowid, cellParams, cellHeight), h('div', {
                     key: 'tc',
                     class: ['vxe-cell', {
                             'c--title': showTitle,
@@ -381,8 +385,8 @@ export default defineComponent({
         };
         const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
             const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
-            const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove, rowExpandHeightFlag } = tableReactData;
-            const { fullAllDataRowIdData } = tableInternalData;
+            const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag } = tableReactData;
+            const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
             const treeOpts = computeTreeOpts.value;
@@ -393,6 +397,7 @@ export default defineComponent({
             const { transform, seqMode } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const rows = [];
+            const { handleGetRowId } = createHandleGetRowId($xeTable);
             tableData.forEach((row, $rowIndex) => {
                 const trOn = {};
                 let rowIndex = $rowIndex;
@@ -413,7 +418,7 @@ export default defineComponent({
                         $xeTable.clearHoverRow();
                     };
                 }
-                const rowid = getRowid($xeTable, row);
+                const rowid = handleGetRowId(row);
                 const rowRest = fullAllDataRowIdData[rowid];
                 let rowLevel = 0;
                 let seq = -1;
@@ -430,7 +435,7 @@ export default defineComponent({
                 }
                 const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex };
                 // 行是否被展开
-                const isExpandRow = expandColumn && !!rowExpandedMaps[rowid];
+                const isExpandRow = expandColumn && !!rowExpandedFlag && !!rowExpandedMaps[rowid];
                 // 树节点是否被展开
                 let isExpandTree = false;
                 let rowChildren = [];
@@ -440,7 +445,7 @@ export default defineComponent({
                 }
                 if (treeConfig && !scrollYLoad && !transform) {
                     rowChildren = row[childrenField];
-                    isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
+                    isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
                 }
                 // 拖拽行事件
                 if (rowOpts.drag && (!treeConfig || transform)) {
@@ -459,7 +464,7 @@ export default defineComponent({
                         'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
                         'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
                         'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-                        'row--pending': !!pendingRowMaps[rowid]
+                        'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
                     },
                     getPropClass(rowClassName, params)
                 ];
@@ -584,7 +589,7 @@ export default defineComponent({
                     isOptimizeMode = true;
                 }
             }
-            if (fixedType || !overflowX) {
+            if (!isColLoading && (fixedType || !overflowX)) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {

package/es/table/src/cell.js

@@ -380,8 +380,8 @@ export const Cell = {
         const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
         const { computeTreeOpts } = $table.getComputeMaps();
-        const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData;
-        const { fullAllDataRowIdData } = tableInternalData;
+        const { treeExpandedFlag } = tableReactData;
+        const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData;
         const treeOpts = computeTreeOpts.value;
         const { row, column, level } = params;
         const { slots } = column;
@@ -401,7 +401,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];
@@ -548,7 +548,8 @@ export const Cell = {
         const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
         const checkboxOpts = computeCheckboxOpts.value;
-        const headerTitle = column.getTitle();
+        const { checkStrictly, showHeader, headerTitle } = checkboxOpts;
+        const colTitle = column.getTitle();
         const ons = {};
         if (!isHidden) {
             ons.onClick = (evnt) => {
@@ -561,11 +562,11 @@ export const Cell = {
         if (headerSlot) {
             return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)));
         }
-        if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+        if (checkStrictly ? !showHeader : showHeader === false) {
             return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
                 h('span', {
                     class: 'vxe-checkbox--label'
-                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
             ]));
         }
         return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
@@ -573,15 +574,15 @@ export const Cell = {
                         'is--checked': isAllCheckboxSelected,
                         'is--disabled': isAllCheckboxDisabled,
                         'is--indeterminate': isAllCheckboxIndeterminate
-                    }], title: getI18n('vxe.table.allTitle') }, ons), [
+                    }], title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}` }, 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) : headerTitle)
+                    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
                 ]
                 : []))
         ]));
@@ -590,8 +591,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table.props;
         const tableReactData = $table.reactData;
+        const tableInternalData = $table.internalData;
         const { treeConfig } = tableProps;
-        const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData;
         const { computeCheckboxOpts } = $table.getComputeMaps();
         const checkboxOpts = computeCheckboxOpts.value;
         const { labelField, checkMethod, visibleMethod } = checkboxOpts;
@@ -605,7 +608,7 @@ export const Cell = {
         const ons = {};
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isChecked = !!selectCheckboxMaps[rowid];
+            isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid];
             ons.onClick = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -615,7 +618,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 });
@@ -649,8 +652,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table.props;
         const tableReactData = $table.reactData;
+        const tableInternalData = $table.internalData;
         const { treeConfig } = tableProps;
-        const { treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { treeIndeterminateRowMaps } = tableInternalData;
         const { computeCheckboxOpts } = $table.getComputeMaps();
         const checkboxOpts = computeCheckboxOpts.value;
         const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts;
@@ -665,7 +670,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.onClick = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -675,7 +680,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 });
@@ -710,8 +715,8 @@ export const Cell = {
      */
     renderExpandCell(params) {
         const { $table, isHidden, row, column } = params;
-        const tableReactData = $table.reactData;
-        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData;
+        const tableInternalData = $table.internalData;
+        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData;
         const { computeExpandOpts } = $table.getComputeMaps();
         const expandOpts = computeExpandOpts.value;
         const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts;
@@ -809,7 +814,7 @@ export const Cell = {
         const { $table, column } = params;
         const { computeSortOpts } = $table.getComputeMaps();
         const sortOpts = computeSortOpts.value;
-        const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
+        const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
         const { order } = column;
         if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
             return [
@@ -820,7 +825,7 @@ export const Cell = {
                         class: ['vxe-sort--asc-btn', iconAsc || getIcon().TABLE_SORT_ASC, {
                                 'sort--active': order === 'asc'
                             }],
-                        title: getI18n('vxe.table.sortAsc'),
+                        title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`,
                         onClick: allowBtn
                             ? (evnt) => {
                                 evnt.stopPropagation();
@@ -832,7 +837,7 @@ export const Cell = {
                         class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
                                 'sort--active': order === 'desc'
                             }],
-                        title: getI18n('vxe.table.sortDesc'),
+                        title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`,
                         onClick: allowBtn
                             ? (evnt) => {
                                 evnt.stopPropagation();