vxe-table 4.17.3 → 4.17.4

package/es/table/src/body.js

@@ -2,7 +2,7 @@ import { h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
-import { getOffsetSize, calcTreeLine, getRowid, createHandleGetRowId, getCellRestHeight } from './util';
+import { getRowid, createHandleGetRowId, getCellRestHeight } from './util';
 import { updateCellTitle, getPropClass } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -40,22 +40,38 @@ export default defineVxeComponent({
         };
         const renderLine = (rowid, params, cellHeight) => {
             const { column } = params;
-            const { afterFullData } = tableInternalData;
             const { treeConfig } = tableProps;
+            const cellOpts = computeCellOpts.value;
+            const rowOpts = computeRowOpts.value;
+            const defaultRowHeight = computeDefaultRowHeight.value;
             const treeOpts = computeTreeOpts.value;
             const { slots, treeNode } = column;
             const { fullAllDataRowIdData } = tableInternalData;
-            if (slots && slots.line) {
-                return $xeTable.callSlot(slots.line, params);
-            }
-            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);
+                }
+                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',
@@ -64,9 +80,9 @@ export default defineVxeComponent({
                         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/table.js

@@ -1771,6 +1771,9 @@ export default defineVxeComponent({
                 internalData.customHeight = 300;
             }
         };
+        /**
+         * 计算自适应列宽
+         */
         const calcColumnAutoWidth = (column, wrapperEl) => {
             const columnOpts = computeColumnOpts.value;
             const { autoOptions } = columnOpts;
@@ -1799,6 +1802,9 @@ export default defineVxeComponent({
             }
             return colWidth + leftRightPadding;
         };
+        /**
+         * 自适应列宽
+         */
         const calcCellWidth = () => {
             const autoWidthColumnList = computeAutoWidthColumnList.value;
             const { fullColumnIdData } = internalData;
@@ -1931,6 +1937,9 @@ export default defineVxeComponent({
             updateColumnOffsetLeft();
             updateHeight();
         };
+        /**
+         * 计算自适应行高
+         */
         const calcCellAutoHeight = (rowRest, wrapperEl) => {
             const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
             let colHeight = rowRest.height;
@@ -1948,12 +1957,17 @@ export default defineVxeComponent({
             }
             return colHeight;
         };
+        /**
+         * 自适应行高
+         */
         const calcCellHeight = () => {
+            const { treeConfig } = props;
             const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
             const { fullAllDataRowIdData } = internalData;
+            const treeOpts = computeTreeOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const el = refElem.value;
-            if (!isAllOverflow && (scrollYLoad || scrollXLoad) && el) {
+            if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine)) && el) {
                 const { handleGetRowId } = createHandleGetRowId($xeTable);
                 el.setAttribute('data-calc-row', 'Y');
                 tableData.forEach(row => {
@@ -3608,6 +3622,7 @@ export default defineVxeComponent({
                         }
                         reactData.isRowLoading = false;
                         handleRecalculateStyle(false, false, false);
+                        updateTreeLineStyle();
                         // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
                         if (!props.showOverflow) {
                             setTimeout(() => {
@@ -3621,6 +3636,7 @@ export default defineVxeComponent({
                                 .then(() => {
                                 handleRecalculateStyle(false, true, true);
                                 updateRowOffsetTop();
+                                updateTreeLineStyle();
                                 resolve();
                             });
                         }
@@ -3630,6 +3646,7 @@ export default defineVxeComponent({
                                     .then(() => {
                                     handleRecalculateStyle(false, true, true);
                                     updateRowOffsetTop();
+                                    updateTreeLineStyle();
                                     resolve();
                                 });
                             });
@@ -4426,32 +4443,89 @@ export default defineVxeComponent({
          * 更新树连接线样式
          */
         const updateTreeLineStyle = () => {
-            // const { tableData } = reactData
-            // const { rowExpandedMaps } = internalData
-            // const treeOpts = computeTreeOpts.value
-            // const { transform, mapChildrenField } = treeOpts
-            // const childrenField = treeOpts.children || treeOpts.childrenField
-            // const { handleGetRowId } = createHandleGetRowId($xeTable)
-            // // 待优化
-            // if (transform) {
-            //   // x
-            // } else {
-            //   // x
-            // }
-            // const handleNodeRow = (row: any, parentRow: any) => {
-            //   const childList: any[] = row[transform ? mapChildrenField : childrenField]
-            //   if (childList && childList.length) {
-            //     childList.forEach(childRow => {
-            //       const childRowid = handleGetRowId(childRow)
-            //       if (rowExpandedMaps[childRowid]) {
-            //         handleNodeRow(childRow, row)
-            //       }
-            //     })
-            //   }
-            // }
-            // tableData.forEach(row => {
-            //   handleNodeRow(row, null)
-            // })
+            const { treeConfig } = props;
+            if (!treeConfig) {
+                return;
+            }
+            const { tableData } = reactData;
+            const { fullAllDataRowIdData, treeExpandedMaps } = internalData;
+            const cellOpts = computeCellOpts.value;
+            const rowOpts = computeRowOpts.value;
+            const defaultRowHeight = computeDefaultRowHeight.value;
+            const treeOpts = computeTreeOpts.value;
+            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;
+                }
+            });
         };
         const handleRowExpandScroll = () => {
             const { elemStore } = internalData;
@@ -12796,7 +12870,7 @@ export default defineVxeComponent({
             }
             handleUpdateRowGroup(groupFields);
             nextTick(() => {
-                const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props;
+                const { data, exportConfig, importConfig, treeConfig, highlightCurrentRow, highlightCurrentColumn } = props;
                 const { scrollXStore, scrollYStore } = internalData;
                 const editOpts = computeEditOpts.value;
                 const treeOpts = computeTreeOpts.value;
@@ -12828,9 +12902,9 @@ export default defineVxeComponent({
                 if (props.editConfig && (editOpts.showStatus || editOpts.showUpdateStatus || editOpts.showInsertStatus) && !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

@@ -560,70 +560,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.reactData;
-    const { treeExpandedFlag } = reactData;
-    const internalData = $table.internalData;
-    const { treeExpandedMaps } = internalData;
-    const { computeTreeOpts } = $table.getComputeMaps();
-    const treeOpts = computeTreeOpts.value;
-    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 { computeSize } = $xeTable.getComputeMaps();
-    const vSize = computeSize.value;
-    if (vSize) {
-        return lineOffsetSizes[vSize] || 0;
-    }
-    return 0;
-}
-export function calcTreeLine(params, prevRow) {
-    const { $table, row } = params;
-    const tableProps = $table.props;
-    const tableReactData = $table.reactData;
-    const tableInternalData = $table.internalData;
-    const { showOverflow } = tableProps;
-    const { scrollYLoad } = tableReactData;
-    const { fullAllDataRowIdData } = tableInternalData;
-    const { computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $table.getComputeMaps();
-    const rowOpts = computeRowOpts.value;
-    const cellOpts = computeCellOpts.value;
-    const defaultRowHeight = computeDefaultRowHeight.value;
-    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 clearTableDefaultStatus($xeTable) {
     const { props, internalData } = $xeTable;
     internalData.initStatus = false;

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.17.3";
+export const version = "4.17.4";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -172,7 +172,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${"4.17.3"}`;
+const version = `table v${"4.17.4"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);