vxe-table 3.19.3 → 3.19.4

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

@@ -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;

package/es/table/src/table.js

@@ -1511,7 +1511,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 +1545,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/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.19.3";
+export const version = "3.19.4";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -173,7 +173,8 @@ VxeUI.setConfig({
             hasChildField: 'hasChild',
             mapChildrenField: '_X_ROW_CHILD',
             indent: 20,
-            showIcon: true
+            showIcon: true,
+            showRootLine: true
         },
         expandConfig: {
             // trigger: 'default',

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"3.19.3"}`;
+const version = `table v${"3.19.4"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);