vxe-table 3.19.2 → 3.19.4

package/packages/table/src/methods.ts

@@ -147,7 +147,7 @@ function handleCustomRestore ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const customOpts = $xeTable.computeCustomOpts
   const { storage, storeOptions } = customOpts
   const isAllCustom = storage === true
-  const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {}, storeOptions)
+  const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions)
   const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom)
   const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom)
   const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom)
@@ -246,7 +246,7 @@ function restoreCustomStorage ($xeTable: VxeTableConstructor & VxeTablePrivateMe
   const customOpts = $xeTable.computeCustomOpts
   const { storage, restoreStore, storeOptions } = customOpts
   const isAllCustom = storage === true
-  const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {}, storeOptions)
+  const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions)
   const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom)
   const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom)
   const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom)
@@ -509,6 +509,7 @@ function handleBaseTreeExpand ($xeTable: VxeTableConstructor & VxeTablePrivateMe
   }
   reactData.treeExpandedFlag++
   return Promise.all(result).then(() => {
+    updateTreeLineStyle($xeTable)
     return $xeTable.recalculate()
   })
 }
@@ -2509,6 +2510,9 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   updateHeight($xeTable)
 }
 
+/**
+ * 计算自适应行高
+ */
 const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
   const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`)
   let colHeight = rowRest.height
@@ -2527,15 +2531,21 @@ const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HT
   return colHeight
 }
 
+/**
+ * 自适应行高
+ */
 const calcCellHeight = ($xeTable: VxeTableConstructor) => {
+  const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
+  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 as HTMLDivElement
-  if (!isAllOverflow && (scrollYLoad || scrollXLoad) && el) {
+  if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine)) && el) {
     const { handleGetRowId } = createHandleGetRowId($xeTable)
     tableData.forEach(row => {
       const rowid = handleGetRowId(row)
@@ -3029,6 +3039,9 @@ function handleRecalculateStyle ($xeTable: VxeTableConstructor & VxeTablePrivate
   calcScrollbar($xeTable)
   updateStyle($xeTable)
   updateRowExpandStyle($xeTable)
+  if (reFull) {
+    updateTreeLineStyle($xeTable)
+  }
   return computeScrollLoad($xeTable).then(() => {
     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
     if (reWidth) {
@@ -3046,6 +3059,9 @@ function handleRecalculateStyle ($xeTable: VxeTableConstructor & VxeTablePrivate
       updateRowOffsetTop($xeTable)
     }
     updateRowExpandStyle($xeTable)
+    if (reFull) {
+      updateTreeLineStyle($xeTable)
+    }
     if (reFull) {
       return computeScrollLoad($xeTable)
     }
@@ -3411,6 +3427,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
           }
           reactData.isRowLoading = false
           handleRecalculateStyle($xeTable, false, false, false)
+          updateTreeLineStyle($xeTable)
           // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
           if (!props.showOverflow) {
             setTimeout(() => {
@@ -3424,6 +3441,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
               .then(() => {
                 handleRecalculateStyle($xeTable, false, true, true)
                 updateRowOffsetTop($xeTable)
+                updateTreeLineStyle($xeTable)
                 resolve()
               })
           } else {
@@ -3432,6 +3450,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
                 .then(() => {
                   handleRecalculateStyle($xeTable, false, true, true)
                   updateRowOffsetTop($xeTable)
+                  updateTreeLineStyle($xeTable)
                   resolve()
                 })
             })
@@ -3939,6 +3958,9 @@ function updateHeight ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   }
 }
 
+/**
+ * 计算自适应列宽
+ */
 function calcColumnAutoWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, column: VxeTableDefines.ColumnInfo, wrapperEl: HTMLDivElement) {
   const columnOpts = $xeTable.computeColumnOpts
   const { autoOptions } = columnOpts
@@ -3968,6 +3990,9 @@ function calcColumnAutoWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   return colWidth + leftRightPadding
 }
 
+/**
+ * 自适应列宽
+ */
 function calcCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -4118,9 +4143,97 @@ function updateRowExpandStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMe
 /**
  * 更新树连接线样式
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function updateTreeLineStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-  // 待优化
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  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: {
+        row: any
+        prevRow: any
+        nextRow: any
+      }[] = []
+
+  const handleNodeRow = (row: any, rIndex: number, rows: any[]) => {
+    const rowid = handleGetRowId(row)
+    const rowRest = fullAllDataRowIdData[rowid] || {}
+    const childList: any[] = 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: any[] = 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: any[] = 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: VxeTableConstructor & VxeTablePrivateMethods) {
@@ -5631,7 +5744,7 @@ const Methods = {
     const customOpts = $xeTable.computeCustomOpts
     const { storage, restoreStore, storeOptions } = customOpts
     const isAllCustom = storage === true
-    const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {}, storeOptions)
+    const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions)
     const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom)
     const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom)
     const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom)
@@ -5669,7 +5782,7 @@ const Methods = {
     const { fullColumnFieldData, collectColumn } = internalData
     const { storage, checkMethod, storeOptions } = customOpts
     const isAllCustom = storage === true
-    const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {}, storeOptions)
+    const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions)
     const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom)
     const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom)
     const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom)
@@ -5789,7 +5902,7 @@ const Methods = {
     const customOpts = $xeTable.computeCustomOpts
     const { updateStore, storage, storeOptions } = customOpts
     const isAllCustom = storage === true
-    const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {}, storeOptions)
+    const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions)
     const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom)
     const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom)
     const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom)
@@ -10819,6 +10932,7 @@ const Methods = {
       }
       reactData.treeExpandedFlag++
     }).then(() => {
+      updateTreeLineStyle($xeTable)
       if (expList.length) {
         $xeTable.recalculate()
       }

package/packages/table/src/table.ts

@@ -1640,7 +1640,7 @@ export default {
 
     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
@@ -1675,9 +1675,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/packages/table/src/util.ts

@@ -549,72 +549,6 @@ export function getLastChildColumn (column: VxeTableDefines.ColumnInfo): VxeTabl
   return column
 }
 
-const lineOffsetSizes: Record<string, any> = {
-  mini: 3,
-  small: 2,
-  medium: 1,
-  large: 0
-}
-
-function countTreeExpandSize (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
-  let count = 1
-  if (!prevRow) {
-    return count
-  }
-  const { $table } = params
-  const reactData = $table as unknown as TableReactData
-  const { treeExpandedFlag } = reactData
-  const internalData = $table as unknown as TableInternalData
-  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: VxeTableConstructor) {
-  const vSize = $xeTable.computeSize
-  if (vSize) {
-    return lineOffsetSizes[vSize] || 0
-  }
-  return 0
-}
-
-export function calcTreeLine (params: VxeTableDefines.CellRenderBodyParams, prevRow: any) {
-  const { $table, row } = params
-  const tableProps = $table
-  const tableReactData = $table as unknown as TableReactData
-  const tableInternalData = $table as unknown as TableInternalData
-
-  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: any, column: any) {
   return XEUtils.get(row, column.field)
 }

package/packages/ui/index.ts

@@ -179,7 +179,8 @@ VxeUI.setConfig({
       hasChildField: 'hasChild',
       mapChildrenField: '_X_ROW_CHILD',
       indent: 20,
-      showIcon: true
+      showIcon: true,
+      showRootLine: true
     },
     expandConfig: {
       // trigger: 'default',