vxe-table 3.19.3 → 3.19.5

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

@@ -60,17 +60,17 @@ function insertTreeRow($xeTable, newRecords, isAppend) {
             const { item: parentRow } = matchObj;
             const parentRest = fullAllDataRowIdData[getRowid($xeTable, parentRow)];
             const parentLevel = parentRest ? parentRest.level : 0;
-            let parentChilds = parentRow[childrenField];
-            let mapChilds = parentRow[mapChildrenField];
-            if (!XEUtils.isArray(parentChilds)) {
-                parentChilds = parentRow[childrenField] = [];
+            let pChilds = parentRow[childrenField];
+            let pMapChilds = parentRow[mapChildrenField];
+            if (!XEUtils.isArray(pChilds)) {
+                pChilds = parentRow[childrenField] = [];
             }
-            if (!XEUtils.isArray(mapChilds)) {
-                mapChilds = parentRow[childrenField] = [];
+            if (!XEUtils.isArray(pMapChilds)) {
+                pMapChilds = parentRow[mapChildrenField] = [];
             }
-            parentChilds[funcName](item);
-            mapChilds[funcName](item);
-            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
+            pChilds[funcName](item);
+            pMapChilds[funcName](item);
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: pChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
             fullDataRowIdData[rowid] = rest;
             fullAllDataRowIdData[rowid] = rest;
         }
@@ -174,14 +174,16 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
                     treeRecords.forEach((row, i) => {
                         if (parentRow) {
                             if (row[parentField] !== parentRow[rowField]) {
-                                row[parentField] = parentRow[rowField];
                                 errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentRow[rowField]}`]);
+                                row[parentField] = parentRow[rowField];
                             }
                         }
                         else {
                             if (row[parentField] !== null) {
+                                if (!XEUtils.eqNull(row[parentField])) {
+                                    errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null']);
+                                }
                                 row[parentField] = null;
-                                errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null']);
                             }
                         }
                         let targetIndex = matchMapObj.index + i;

package/es/table/src/body.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { isEnableConf, getClass } from '../../ui/src/utils';
-import { getOffsetSize, calcTreeLine, getRowid, createHandleGetRowId, getCellRestHeight } from './util';
+import { getRowid, createHandleGetRowId, getCellRestHeight } from './util';
 import { updateCellTitle } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
@@ -19,22 +19,38 @@ function renderLine(h, $xeTable, rowid, params, cellHeight) {
     const tableProps = $xeTable;
     const tableInternalData = $xeTable;
     const { column } = params;
-    const { afterFullData } = tableInternalData;
     const { treeConfig } = tableProps;
+    const cellOpts = $xeTable.computeCellOpts;
+    const rowOpts = $xeTable.computeRowOpts;
+    const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const treeOpts = $xeTable.computeTreeOpts;
     const { slots, treeNode } = column;
     const { fullAllDataRowIdData } = tableInternalData;
-    if (slots && slots.line) {
-        return $xeTable.callSlot(slots.line, params, h);
-    }
-    const rowRest = fullAllDataRowIdData[rowid];
-    let rLevel = 0;
-    let prevRow = null;
-    if (rowRest) {
-        rLevel = rowRest.level;
-        prevRow = rowRest.items[rowRest.treeIndex - 1];
-    }
     if (treeConfig && treeNode && (treeOpts.showLine || treeOpts.line)) {
+        if (slots && slots.line) {
+            return $xeTable.callSlot(slots.line, params, h);
+        }
+        const rowRest = fullAllDataRowIdData[rowid];
+        let rLevel = 0;
+        let prevRow = null;
+        let parentRow = null;
+        let lineHeight = '';
+        if (rowRest) {
+            rLevel = rowRest.level;
+            prevRow = rowRest.items[rowRest.treeIndex - 1];
+            parentRow = rowRest.parent;
+        }
+        if (!rLevel && !treeOpts.showRootLine) {
+            return [];
+        }
+        if (prevRow) {
+            const prevRowRest = fullAllDataRowIdData[getRowid($xeTable, prevRow)] || {};
+            lineHeight = `${prevRowRest.lineHeight || 0}px`;
+        }
+        else if (rLevel && parentRow) {
+            const parentRowRest = fullAllDataRowIdData[getRowid($xeTable, parentRow)] || {};
+            lineHeight = `calc(-1em + ${Math.floor(cellHeight / 2 + getCellRestHeight(parentRowRest, cellOpts, rowOpts, defaultRowHeight) / 2)}px)`;
+        }
         return [
             h('div', {
                 key: 'tl',
@@ -43,9 +59,9 @@ function renderLine(h, $xeTable, rowid, params, cellHeight) {
                 h('div', {
                     class: 'vxe-tree--line',
                     style: {
-                        height: `${getRowid($xeTable, afterFullData[0]) === rowid ? 1 : calcTreeLine(params, prevRow)}px`,
+                        height: lineHeight,
                         bottom: `-${Math.floor(cellHeight / 2)}px`,
-                        left: `${(rLevel * treeOpts.indent) + (rLevel ? 2 - getOffsetSize($xeTable) : 0) + 16}px`
+                        left: `calc(${(rLevel * treeOpts.indent)}px + 1em)`
                     }
                 })
             ])

package/es/table/src/methods.js

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils';
-import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom';
+import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
@@ -2424,6 +2424,9 @@ function autoCellWidth($xeTable) {
     updateColumnOffsetLeft($xeTable);
     updateHeight($xeTable);
 }
+/**
+ * 计算自适应行高
+ */
 const calcCellAutoHeight = (rowRest, wrapperEl) => {
     const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
     let colHeight = rowRest.height;
@@ -2441,14 +2444,20 @@ const calcCellAutoHeight = (rowRest, wrapperEl) => {
     }
     return colHeight;
 };
+/**
+ * 自适应行高
+ */
 const calcCellHeight = ($xeTable) => {
+    const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
+    const { treeConfig } = props;
     const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
     const { fullAllDataRowIdData } = internalData;
+    const treeOpts = $xeTable.computeTreeOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const el = $xeTable.$refs.refElem;
-    if (!isAllOverflow && (scrollYLoad || scrollXLoad) && el) {
+    if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine)) && el) {
         const { handleGetRowId } = createHandleGetRowId($xeTable);
         tableData.forEach(row => {
             const rowid = handleGetRowId(row);
@@ -3286,6 +3295,7 @@ function loadTableData($xeTable, datas, isReset) {
                 }
                 reactData.isRowLoading = false;
                 handleRecalculateStyle($xeTable, false, false, false);
+                updateTreeLineStyle($xeTable);
                 // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
                 if (!props.showOverflow) {
                     setTimeout(() => {
@@ -3299,6 +3309,7 @@ function loadTableData($xeTable, datas, isReset) {
                         .then(() => {
                         handleRecalculateStyle($xeTable, false, true, true);
                         updateRowOffsetTop($xeTable);
+                        updateTreeLineStyle($xeTable);
                         resolve();
                     });
                 }
@@ -3308,6 +3319,7 @@ function loadTableData($xeTable, datas, isReset) {
                             .then(() => {
                             handleRecalculateStyle($xeTable, false, true, true);
                             updateRowOffsetTop($xeTable);
+                            updateTreeLineStyle($xeTable);
                             resolve();
                         });
                     });
@@ -3790,6 +3802,9 @@ function updateHeight($xeTable) {
         internalData.customHeight = 300;
     }
 }
+/**
+ * 计算自适应列宽
+ */
 function calcColumnAutoWidth($xeTable, column, wrapperEl) {
     const columnOpts = $xeTable.computeColumnOpts;
     const { autoOptions } = columnOpts;
@@ -3818,6 +3833,9 @@ function calcColumnAutoWidth($xeTable, column, wrapperEl) {
     }
     return colWidth + leftRightPadding;
 }
+/**
+ * 自适应列宽
+ */
 function calcCellWidth($xeTable) {
     const internalData = $xeTable;
     const autoWidthColumnList = $xeTable.computeAutoWidthColumnList;
@@ -3958,9 +3976,93 @@ function updateRowExpandStyle($xeTable) {
 /**
  * 更新树连接线样式
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function updateTreeLineStyle($xeTable) {
-    // 待优化
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { treeConfig } = props;
+    if (!treeConfig) {
+        return;
+    }
+    const { tableData } = reactData;
+    const { fullAllDataRowIdData, treeExpandedMaps } = internalData;
+    const cellOpts = $xeTable.computeCellOpts;
+    const rowOpts = $xeTable.computeRowOpts;
+    const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+    const treeOpts = $xeTable.computeTreeOpts;
+    const { transform, mapChildrenField } = treeOpts;
+    const childrenField = treeOpts.children || treeOpts.childrenField;
+    const { handleGetRowId } = createHandleGetRowId($xeTable);
+    const expParentList = [];
+    const handleNodeRow = (row, rIndex, rows) => {
+        const rowid = handleGetRowId(row);
+        const rowRest = fullAllDataRowIdData[rowid] || {};
+        const childList = row[transform ? mapChildrenField : childrenField];
+        const prevRow = rows[rIndex - 1] || null;
+        const nextRow = rows[rIndex + 1] || null;
+        if (childList && childList.length && treeExpandedMaps[rowid]) {
+            expParentList.push({ row, prevRow, nextRow });
+            childList.forEach((childRow, crIndex) => {
+                const childRowid = handleGetRowId(childRow);
+                if (treeExpandedMaps[childRowid]) {
+                    handleNodeRow(childRow, crIndex, childList);
+                }
+            });
+        }
+        else {
+            if (nextRow) {
+                const nextRowid = handleGetRowId(nextRow);
+                const nextRowRest = fullAllDataRowIdData[nextRowid] || {};
+                const currCellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+                const nextCellHeight = getCellRestHeight(nextRowRest, cellOpts, rowOpts, defaultRowHeight);
+                rowRest.oHeight = currCellHeight;
+                rowRest.lineHeight = Math.floor(currCellHeight / 2 + nextCellHeight / 2);
+            }
+            else {
+                rowRest.oHeight = 0;
+                rowRest.lineHeight = 0;
+            }
+        }
+    };
+    tableData.forEach((row, rIndex) => {
+        handleNodeRow(row, rIndex, tableData);
+    });
+    XEUtils.lastArrayEach(expParentList, ({ row, nextRow }) => {
+        const rowid = handleGetRowId(row);
+        const childList = row[transform ? mapChildrenField : childrenField];
+        const rowRest = fullAllDataRowIdData[rowid];
+        if (rowRest) {
+            const currCellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+            let countOffsetHeight = currCellHeight;
+            let countLineHeight = 0;
+            childList.forEach((childRow) => {
+                const childRowid = handleGetRowId(childRow);
+                const childRowRest = fullAllDataRowIdData[childRowid] || {};
+                const childList = childRow[transform ? mapChildrenField : childrenField];
+                if (treeExpandedMaps[childRowid] && childList && childList.length) {
+                    countOffsetHeight += (childRowRest.oHeight || 0);
+                    countLineHeight += (childRowRest.oHeight || 0);
+                }
+                else {
+                    const cellHeight = getCellRestHeight(childRowRest, cellOpts, rowOpts, defaultRowHeight);
+                    childRowRest.oHeight = cellHeight;
+                    childRowRest.lineHeight = cellHeight;
+                    countOffsetHeight += cellHeight;
+                    countLineHeight += cellHeight;
+                }
+            });
+            if (nextRow) {
+                const nextRowid = handleGetRowId(nextRow);
+                const nextRowRest = fullAllDataRowIdData[nextRowid] || {};
+                const currCellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+                const nextCellHeight = getCellRestHeight(nextRowRest, cellOpts, rowOpts, defaultRowHeight);
+                countOffsetHeight += currCellHeight;
+                countLineHeight += Math.floor(currCellHeight / 2 + nextCellHeight / 2);
+            }
+            rowRest.lineHeight = countLineHeight;
+            rowRest.oHeight = countOffsetHeight;
+        }
+    });
 }
 function handleRowExpandScroll($xeTable) {
     const internalData = $xeTable;
@@ -10831,6 +10933,7 @@ const Methods = {
     },
     triggerBodyWheelEvent(evnt) {
         const $xeTable = this;
+        const $xeParentTable = $xeTable.$xeParentTable;
         const tableProps = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
@@ -10889,6 +10992,21 @@ const Methods = {
                 return;
             }
         }
+        // 展开行处理，如果展开行嵌入表格中
+        if ($xeParentTable) {
+            if (isRollY) {
+                if (checkTargetElement(evnt.target, [leftScrollElem, bodyScrollElem, rightScrollElem], evnt.currentTarget)) {
+                    evnt.stopPropagation();
+                    return;
+                }
+            }
+            if (isRollX) {
+                if (checkTargetElement(evnt.target, [headerScrollElem, bodyScrollElem, footerScrollElem], evnt.currentTarget)) {
+                    evnt.stopPropagation();
+                    return;
+                }
+            }
+        }
         if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
             return;
         }

package/es/table/src/table.js

@@ -497,6 +497,10 @@ export default {
         $xeTabs: {
             default: null
         },
+        $xeParentTable: {
+            from: '$xeTable',
+            default: null
+        },
         $xeGrid: {
             default: null
         },
@@ -1376,7 +1380,7 @@ export default {
             const $xeTable = this;
             const reactData = $xeTable;
             const { initStatus } = this;
-            if (value && value.length >= 50000) {
+            if (value && value.length >= 20000) {
                 warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)']);
             }
             this.loadTableData(value || [], true).then(() => {
@@ -1511,7 +1515,7 @@ export default {
         const internalData = $xeTable;
         XEUtils.assign(internalData, createInternalData());
         handleKeyField($xeTable);
-        const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props;
+        const { data, exportConfig, importConfig, treeConfig, highlightCurrentRow, highlightCurrentColumn } = props;
         const { scrollXStore, scrollYStore } = internalData;
         const columnOpts = $xeTable.computeColumnOpts;
         const editOpts = $xeTable.computeEditOpts;
@@ -1545,9 +1549,9 @@ export default {
         if (props.editConfig && editOpts.showStatus && !props.keepSource) {
             warnLog('vxe.error.reqProp', ['keep-source']);
         }
-        if (treeConfig && (treeOpts.showLine || treeOpts.line) && !showOverflow) {
-            warnLog('vxe.error.reqProp', ['show-overflow']);
-        }
+        // if (treeConfig && (treeOpts.showLine || treeOpts.line) && !showOverflow) {
+        //   warnLog('vxe.error.reqProp', ['show-overflow'])
+        // }
         if (treeConfig && !treeOpts.transform && props.stripe) {
             warnLog('vxe.error.noTree', ['stripe']);
         }

package/es/table/src/util.js

@@ -503,67 +503,6 @@ export function getLastChildColumn(column) {
     }
     return column;
 }
-const lineOffsetSizes = {
-    mini: 3,
-    small: 2,
-    medium: 1,
-    large: 0
-};
-function countTreeExpandSize(prevRow, params) {
-    let count = 1;
-    if (!prevRow) {
-        return count;
-    }
-    const { $table } = params;
-    const reactData = $table;
-    const { treeExpandedFlag } = reactData;
-    const internalData = $table;
-    const { treeExpandedMaps } = internalData;
-    const treeOpts = $table.computeTreeOpts;
-    const { transform, mapChildrenField } = treeOpts;
-    const childrenField = treeOpts.children || treeOpts.childrenField;
-    const rowChildren = prevRow[transform ? mapChildrenField : childrenField];
-    if (rowChildren && treeExpandedFlag && treeExpandedMaps[getRowid($table, prevRow)]) {
-        for (let index = 0; index < rowChildren.length; index++) {
-            count += countTreeExpandSize(rowChildren[index], params);
-        }
-    }
-    return count;
-}
-export function getOffsetSize($xeTable) {
-    const vSize = $xeTable.computeSize;
-    if (vSize) {
-        return lineOffsetSizes[vSize] || 0;
-    }
-    return 0;
-}
-export function calcTreeLine(params, prevRow) {
-    const { $table, row } = params;
-    const tableProps = $table;
-    const tableReactData = $table;
-    const tableInternalData = $table;
-    const { showOverflow } = tableProps;
-    const { scrollYLoad } = tableReactData;
-    const { fullAllDataRowIdData } = tableInternalData;
-    const rowOpts = $table.computeRowOpts;
-    const cellOpts = $table.computeCellOpts;
-    const defaultRowHeight = $table.computeDefaultRowHeight;
-    const rowid = getRowid($table, row);
-    const rowRest = fullAllDataRowIdData[rowid];
-    const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
-    let expandSize = 1;
-    if (prevRow) {
-        expandSize = countTreeExpandSize(prevRow, params);
-    }
-    let cellHeight = currCellHeight;
-    const vnHeight = rowRest.height;
-    if (scrollYLoad) {
-        if (!showOverflow) {
-            cellHeight = vnHeight || currCellHeight;
-        }
-    }
-    return cellHeight * expandSize - (prevRow ? 1 : (12 - getOffsetSize($table)));
-}
 export function getCellValue(row, column) {
     return XEUtils.get(row, column.field);
 }

package/es/table/style.css

@@ -3547,13 +3547,14 @@
   left: 50%;
   font-size: 12px;
   line-height: 1em;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -2px);
   text-align: left;
   z-index: 4;
   padding: 0 var(--vxe-ui-table-cell-padding-default);
   pointer-events: none;
 }
 .vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-wrapper {
+  position: relative;
   display: inline-block;
   border-radius: var(--vxe-ui-border-radius);
   pointer-events: auto;
@@ -3584,11 +3585,11 @@
 }
 .vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   bottom: 100%;
-  transform: translate(-50%, 50%);
+  transform: translate(-50%, 0);
 }
 .vxe-table--render-default.valid-msg--single .vxe-body--row:last-child:first-child .vxe-cell--valid-error-tip {
   bottom: auto;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -2px);
 }
 .vxe-table--render-default.valid-msg--full .vxe-body--row:last-child .vxe-cell--valid-error-tip {
   top: calc(100% - 1.3em);