vxe-table 3.19.3 → 3.19.5

package/packages/table/module/edit/mixin.ts

@@ -70,17 +70,17 @@ function insertTreeRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
       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
     } else {
@@ -181,13 +181,15 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
           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/packages/table/src/body.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement } from 'vue'
 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'
 
@@ -28,22 +28,37 @@ function renderLine (h: CreateElement, $xeTable : VxeTableConstructor & VxeTable
   const tableInternalData = $xeTable as unknown as TableInternalData
 
   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 as any).line) {
-    return $xeTable.callSlot((slots as any).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 as any).line) {
+      return $xeTable.callSlot((slots as any).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',
@@ -52,9 +67,9 @@ function renderLine (h: CreateElement, $xeTable : VxeTableConstructor & VxeTable
         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/packages/table/src/methods.ts

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom'
+import { 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 Cell from './cell'
@@ -2510,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
@@ -2528,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)
@@ -3418,6 +3427,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
           }
           reactData.isRowLoading = false
           handleRecalculateStyle($xeTable, false, false, false)
+          updateTreeLineStyle($xeTable)
           // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
           if (!props.showOverflow) {
             setTimeout(() => {
@@ -3431,6 +3441,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
               .then(() => {
                 handleRecalculateStyle($xeTable, false, true, true)
                 updateRowOffsetTop($xeTable)
+                updateTreeLineStyle($xeTable)
                 resolve()
               })
           } else {
@@ -3439,6 +3450,7 @@ function loadTableData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
                 .then(() => {
                   handleRecalculateStyle($xeTable, false, true, true)
                   updateRowOffsetTop($xeTable)
+                  updateTreeLineStyle($xeTable)
                   resolve()
                 })
             })
@@ -3946,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
@@ -3975,6 +3990,9 @@ function calcColumnAutoWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   return colWidth + leftRightPadding
 }
 
+/**
+ * 自适应列宽
+ */
 function calcCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -4125,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) {
@@ -11180,6 +11286,7 @@ const Methods = {
   },
   triggerBodyWheelEvent (evnt: WheelEvent) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const $xeParentTable = $xeTable.$xeParentTable as VxeTableConstructor & VxeTablePrivateMethods
     const tableProps = $xeTable
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
@@ -11246,6 +11353,22 @@ const Methods = {
       }
     }
 
+    // 展开行处理，如果展开行嵌入表格中
+    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
     }

package/packages/table/src/table.ts

@@ -532,6 +532,10 @@ export default {
     $xeTabs: {
       default: null
     },
+    $xeParentTable: {
+      from: '$xeTable',
+      default: null
+    },
     $xeGrid: {
       default: null
     },
@@ -1490,7 +1494,7 @@ export default {
       const reactData = $xeTable as unknown as TableReactData
 
       const { initStatus } = this
-      if (value && value.length >= 50000) {
+      if (value && value.length >= 20000) {
         warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)'])
       }
       this.loadTableData(value || [], true).then(() => {
@@ -1640,7 +1644,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 +1679,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',

package/packages/ui/src/dom.ts

@@ -140,6 +140,24 @@ export function updateCellTitle (overflowElem: any, column: any) {
   }
 }
 
+export function checkTargetElement (target: HTMLElement | EventTarget | null, exEls: (HTMLElement | null)[], endEl?: HTMLElement | EventTarget | null) {
+  let targetEl = target
+  if (!exEls || !exEls.length) {
+    return false
+  }
+  const [exEl1, exEl2, exEl3] = exEls
+  while (targetEl) {
+    if (exEl1 === targetEl || (exEl2 && targetEl === exEl2) || (exEl3 && targetEl === exEl3)) {
+      return true
+    }
+    if (endEl && targetEl === endEl) {
+      return false
+    }
+    targetEl = (targetEl as HTMLElement).parentElement
+  }
+  return false
+}
+
 /**
  * 检查触发源是否属于目标节点
  */

package/styles/components/table.scss

@@ -2223,16 +2223,28 @@ $btnThemeList: (
       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-cell--valid-error-wrapper {
+      position: relative;
       display: inline-block;
       border-radius: var(--vxe-ui-border-radius);
       pointer-events: auto;
+      // &::before {
+      //   content: "";
+      //   position: absolute;
+      //   top: -0.75em;
+      //   left: 50%;
+      //   bottom: auto;
+      //   transform: translateX(-50%);
+      //   border-width: 0.5em;
+      //   border-style: solid;
+      //   border-color: transparent transparent var(--vxe-ui-table-validate-error-color) transparent;
+      // }
     }
     .vxe-cell--valid-error-theme-beautify {
       padding: 0.2em 0.6em 0.25em 0.6em;
@@ -2267,12 +2279,26 @@ $btnThemeList: (
       &:last-child {
         .vxe-cell--valid-error-tip {
           bottom: calc(100%);
-          transform: translate(-50%, 50%);
+          transform: translate(-50%, 0);
+          // .vxe-cell--valid-error-wrapper {
+          //   &::before {
+          //     bottom: -0.75em;
+          //     top: auto;
+          //     border-color: var(--vxe-ui-table-validate-error-color) transparent transparent transparent;
+          //   }
+          // }
         }
         &:first-child {
           .vxe-cell--valid-error-tip {
             bottom: auto;
-            transform: translate(-50%, -50%);
+            transform: translate(-50%, -2px);
+            // .vxe-cell--valid-error-wrapper {
+            //   &::before {
+            //     top: -0.75em;
+            //     bottom: auto;
+            //     border-color: transparent transparent var(--vxe-ui-table-validate-error-color) transparent;
+            //   }
+            // }
           }
         }
       }
@@ -2308,6 +2334,11 @@ $btnThemeList: (
             background-color: #f56c6c;
             pointer-events: auto;
           }
+          // .vxe-cell--valid-error-wrapper {
+          //   &::before {
+          //     display: none;
+          //   }
+          // }
         }
       }
     }