vxe-table 3.19.3 → 3.19.4

package/lib/index.umd.js

@@ -2005,7 +2005,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.19.3";
+const version = "3.19.4";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2178,7 +2178,8 @@ core_.VxeUI.setConfig({
       hasChildField: 'hasChild',
       mapChildrenField: '_X_ROW_CHILD',
       indent: 20,
-      showIcon: true
+      showIcon: true,
+      showRootLine: true
     },
     expandConfig: {
       // trigger: 'default',
@@ -2695,7 +2696,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.19.3"}`;
+const log_version = `table v${"3.19.4"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -3477,85 +3478,6 @@ 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;
-}
-function getOffsetSize($xeTable) {
-  const vSize = $xeTable.computeSize;
-  if (vSize) {
-    return lineOffsetSizes[vSize] || 0;
-  }
-  return 0;
-}
-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));
-}
 function getCellValue(row, column) {
   return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, column.field);
 }
@@ -8878,6 +8800,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;
@@ -8895,9 +8820,16 @@ const calcCellAutoHeight = (rowRest, wrapperEl) => {
   }
   return colHeight;
 };
+/**
+ * 自适应行高
+ */
 const calcCellHeight = $xeTable => {
+  const props = $xeTable;
   const reactData = $xeTable;
   const internalData = $xeTable;
+  const {
+    treeConfig
+  } = props;
   const {
     tableData,
     isAllOverflow,
@@ -8907,9 +8839,10 @@ const calcCellHeight = $xeTable => {
   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);
@@ -9833,6 +9766,7 @@ function loadTableData($xeTable, datas, isReset) {
         }
         reactData.isRowLoading = false;
         handleRecalculateStyle($xeTable, false, false, false);
+        updateTreeLineStyle($xeTable);
         // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
         if (!props.showOverflow) {
           setTimeout(() => {
@@ -9845,6 +9779,7 @@ function loadTableData($xeTable, datas, isReset) {
           restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
             handleRecalculateStyle($xeTable, false, true, true);
             updateRowOffsetTop($xeTable);
+            updateTreeLineStyle($xeTable);
             resolve();
           });
         } else {
@@ -9852,6 +9787,7 @@ function loadTableData($xeTable, datas, isReset) {
             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
               handleRecalculateStyle($xeTable, false, true, true);
               updateRowOffsetTop($xeTable);
+              updateTreeLineStyle($xeTable);
               resolve();
             });
           });
@@ -10417,6 +10353,9 @@ function updateHeight($xeTable) {
     internalData.customHeight = 300;
   }
 }
+/**
+ * 计算自适应列宽
+ */
 function calcColumnAutoWidth($xeTable, column, wrapperEl) {
   const columnOpts = $xeTable.computeColumnOpts;
   const {
@@ -10451,6 +10390,9 @@ function calcColumnAutoWidth($xeTable, column, wrapperEl) {
   }
   return colWidth + leftRightPadding;
 }
+/**
+ * 自适应列宽
+ */
 function calcCellWidth($xeTable) {
   const internalData = $xeTable;
   const autoWidthColumnList = $xeTable.computeAutoWidthColumnList;
@@ -10612,9 +10554,109 @@ 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);
+  });
+  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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;
@@ -19656,12 +19698,12 @@ function renderLine(h, $xeTable, rowid, params, cellHeight) {
   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,
@@ -19670,26 +19712,39 @@ function renderLine(h, $xeTable, rowid, params, cellHeight) {
   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',
       class: 'vxe-tree--line-wrapper'
     }, [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)`
       }
     })])];
   }
@@ -31737,7 +31792,6 @@ function renderBody(h, $xeTable) {
       exportConfig,
       importConfig,
       treeConfig,
-      showOverflow,
       highlightCurrentRow,
       highlightCurrentColumn
     } = props;
@@ -31779,9 +31833,9 @@ function renderBody(h, $xeTable) {
     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']);
     }