vxe-table 4.17.3 → 4.17.5

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

@@ -67,17 +67,17 @@ hooks.add('tableEditModule', {
                     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;
                 }
@@ -178,14 +178,16 @@ hooks.add('tableEditModule', {
                             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

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

@@ -1,7 +1,7 @@
 import { h, reactive, ref, provide, inject, nextTick, Teleport, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom';
+import { initTpImg, 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 { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn } from './util';
@@ -46,6 +46,7 @@ export default defineVxeComponent({
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const $xeTabs = inject('$xeTabs', null);
+        const $xeParentTable = inject('$xeTable', null);
         const $xeGrid = inject('$xeGrid', null);
         const $xeGantt = inject('$xeGantt', null);
         const $xeGGWrapper = $xeGrid || $xeGantt;
@@ -1771,6 +1772,9 @@ export default defineVxeComponent({
                 internalData.customHeight = 300;
             }
         };
+        /**
+         * 计算自适应列宽
+         */
         const calcColumnAutoWidth = (column, wrapperEl) => {
             const columnOpts = computeColumnOpts.value;
             const { autoOptions } = columnOpts;
@@ -1799,6 +1803,9 @@ export default defineVxeComponent({
             }
             return colWidth + leftRightPadding;
         };
+        /**
+         * 自适应列宽
+         */
         const calcCellWidth = () => {
             const autoWidthColumnList = computeAutoWidthColumnList.value;
             const { fullColumnIdData } = internalData;
@@ -1931,6 +1938,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 +1958,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 +3623,7 @@ export default defineVxeComponent({
                         }
                         reactData.isRowLoading = false;
                         handleRecalculateStyle(false, false, false);
+                        updateTreeLineStyle();
                         // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
                         if (!props.showOverflow) {
                             setTimeout(() => {
@@ -3621,6 +3637,7 @@ export default defineVxeComponent({
                                 .then(() => {
                                 handleRecalculateStyle(false, true, true);
                                 updateRowOffsetTop();
+                                updateTreeLineStyle();
                                 resolve();
                             });
                         }
@@ -3630,6 +3647,7 @@ export default defineVxeComponent({
                                     .then(() => {
                                     handleRecalculateStyle(false, true, true);
                                     updateRowOffsetTop();
+                                    updateTreeLineStyle();
                                     resolve();
                                 });
                             });
@@ -4426,32 +4444,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;
@@ -11348,6 +11423,21 @@ export default defineVxeComponent({
                         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;
                 }
@@ -12572,7 +12662,7 @@ export default defineVxeComponent({
         watch(dataFlag, () => {
             const { initStatus } = internalData;
             const value = props.data || [];
-            if (value && value.length >= 50000) {
+            if (value && value.length >= 20000) {
                 warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)']);
             }
             loadTableData(value, true).then(() => {
@@ -12796,7 +12886,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 +12918,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/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);