vxe-table 4.23.3 → 4.23.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.23.3",
+  "version": "4.23.5",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -66,7 +66,7 @@
     "typescript": "~5.9.3",
     "vue": "3.4.27",
     "vue-router": "~4.5.1",
-    "vxe-pc-ui": "4.20.17"
+    "vxe-pc-ui": "4.20.19"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

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

@@ -307,7 +307,7 @@ hooks.add('tableEditModule', {
 
       reactData.removeRowFlag++
       reactData.insertRowFlag++
-      $xeTable.cacheRowMap(false)
+      $xeTable.cacheRowMap(false, false)
       $xeTable.updateScrollYStatus()
       $xeTable.handleTableData(treeConfig && transform)
       if (!(treeConfig && transform)) {
@@ -692,7 +692,7 @@ hooks.add('tableEditModule', {
         reactData.removeRowFlag++
         reactData.insertRowFlag++
         reactData.pendingRowFlag++
-        $xeTable.cacheRowMap(false)
+        $xeTable.cacheRowMap(false, false)
         $xeTable.handleTableData(treeConfig && transform)
         $xeTable.updateFooter()
         $xeTable.handleUpdateBodyMerge()

package/packages/table/src/table.ts

@@ -30,7 +30,7 @@ import '../module/validator/hook'
 import '../module/custom/hook'
 import '../render'
 
-import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType, VxeComponentStyleType, VxeModalConstructor, VxeModalMethods, VxeSplitterConstructor, VxeSplitterMethods } from 'vxe-pc-ui'
+import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType, VxeComponentStyleType, VxeModalConstructor, VxeModalMethods, VxeSplitterConstructor, VxeSplitterMethods, VxeComponentSizeType } from 'vxe-pc-ui'
 import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes, VxeTableCustomPanelConstructor } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('table')
@@ -1141,9 +1141,9 @@ export default defineVxeComponent({
       return { toVisibleIndex: 0, visibleSize: 6 }
     }
 
-    const calcVarRowHeightConfig = (sizeKey: 'default' | 'medium' | 'small' | 'mini', sizeEl: Element) => {
+    const calcVarRowHeightConfig = (sizeKey: VxeComponentSizeType, sizeEl: Element) => {
       const { rowHeightStore } = reactData
-      if (sizeEl && sizeEl.clientHeight) {
+      if (sizeKey && sizeEl && sizeEl.clientHeight) {
         rowHeightStore[sizeKey] = sizeEl.clientHeight
       }
     }
@@ -1780,7 +1780,7 @@ export default defineVxeComponent({
           internalData.tableFullGroupData = groupRest.treeData
           reactData.isRowGroupStatus = true
           reactData.rowGroupList = aggGroupConfs
-          $xeTable.cacheRowMap(false)
+          $xeTable.cacheRowMap(false, false)
         }
         // 如果自定义了顺序
         if (isCustomSort && sortData) {
@@ -3341,7 +3341,7 @@ export default defineVxeComponent({
       }
     }
 
-    const handleAsyncTreeExpandChilds = (row: any): Promise<void> => {
+    const handleAsyncTreeExpandChilds = (row: any, autoExpand: boolean): Promise<void> => {
       const treeOpts = computeTreeOpts.value
       const checkboxOpts = computeCheckboxOpts.value
       const { transform, loadMethod } = treeOpts
@@ -3367,7 +3367,7 @@ export default defineVxeComponent({
             if (childRecords) {
               return $xeTable.loadTreeChildren(row, childRecords).then(childRows => {
                 const { treeExpandedMaps } = internalData
-                if (childRows.length && !treeExpandedMaps[rowid]) {
+                if (autoExpand && childRows.length && !treeExpandedMaps[rowid]) {
                   treeExpandedMaps[rowid] = row
                 }
                 reactData.treeExpandedFlag++
@@ -3591,7 +3591,9 @@ export default defineVxeComponent({
       }
       const varEl = refVarElem.value
       if (varEl) {
-        const [defEl, mediumEl, smallEl, miniEl] = varEl.children
+        const [dxlargeEl, largeEl, defEl, mediumEl, smallEl, miniEl] = varEl.children
+        calcVarRowHeightConfig('xlarge', dxlargeEl)
+        calcVarRowHeightConfig('large', largeEl)
         calcVarRowHeightConfig('default', defEl)
         calcVarRowHeightConfig('medium', mediumEl)
         calcVarRowHeightConfig('small', smallEl)
@@ -4092,7 +4094,7 @@ export default defineVxeComponent({
       internalData.tableFullTreeData = isRGroup ? [] : treeData
       internalData.tableFullGroupData = isRGroup ? treeData : []
       // 缓存数据
-      $xeTable.cacheRowMap(isReset)
+      $xeTable.cacheRowMap(isReset, true)
       // 原始数据
       internalData.tableSynchData = datas
       if (isReset) {
@@ -4574,7 +4576,7 @@ export default defineVxeComponent({
               const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid]
               // 是否使用懒加载
               if (isLoad) {
-                result.push(handleAsyncTreeExpandChilds(row))
+                result.push(handleAsyncTreeExpandChilds(row, true))
               } else {
                 if (row[childrenField] && row[childrenField].length) {
                   treeExpandedMaps[rowid] = row
@@ -5581,7 +5583,7 @@ export default defineVxeComponent({
           if (reDelFlag) {
             reactData.removeRowFlag++
             $xeTable.updateFooter()
-            $xeTable.cacheRowMap(false)
+            $xeTable.cacheRowMap(false, true)
             $xeTable.handleTableData(treeConfig && transform)
             if (!(treeConfig && transform)) {
               $xeTable.updateAfterDataIndex()
@@ -7799,7 +7801,7 @@ export default defineVxeComponent({
        * 重新懒加载树节点，并展开该节点
        * @param {Row} row 行对象
        */
-      reloadTreeExpand (row) {
+      reloadTreeExpand (row, autoExpand = true) {
         const { treeExpandLazyLoadedMaps } = internalData
         const treeOpts = computeTreeOpts.value
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
@@ -7807,7 +7809,7 @@ export default defineVxeComponent({
         const rowid = getRowid($xeTable, row)
         if (lazy && row[hasChildField] && !treeExpandLazyLoadedMaps[rowid]) {
           return $xeTable.clearTreeExpandLoaded(row).then(() => {
-            return handleAsyncTreeExpandChilds(row)
+            return handleAsyncTreeExpandChilds(row, autoExpand)
           }).then(() => {
             if (transform) {
               handleVirtualTreeToList()
@@ -9701,7 +9703,7 @@ export default defineVxeComponent({
       internalData.removeRowMaps = rRowMaps
       internalData.afterFullData = afterFullList
 
-      $xeTable.cacheRowMap(false)
+      $xeTable.cacheRowMap(false, false)
       $xeTable.handleTableData(treeConfig && transform)
       $xeTable.updateFooter()
       $xeTable.handleUpdateBodyMerge()
@@ -9926,7 +9928,7 @@ export default defineVxeComponent({
       /**
        * 更新数据行的 Map
        */
-      cacheRowMap (isReset) {
+      cacheRowMap (isReset, isReLoaded) {
         const { treeConfig } = props
         const { isRowGroupStatus } = reactData
         const { currKeyField, fullAllDataRowIdData, tableFullData, tableFullTreeData, tableFullGroupData, treeExpandedMaps, rowExpandedMaps, selectCheckboxMaps } = internalData
@@ -9946,8 +9948,10 @@ export default defineVxeComponent({
             fullDataRowIdMaps[rowid] = rowRest
             fullAllDataRowIdMaps[rowid] = rowRest
           }
-          rowRest.treeLoaded = false
-          rowRest.expandLoaded = false
+          if (isReset || isReLoaded) {
+            rowRest.treeLoaded = false
+            rowRest.expandLoaded = false
+          }
 
           rowRest._seq = rowNum++
           rowRest.row = row
@@ -11781,7 +11785,9 @@ export default defineVxeComponent({
         }
         $xeTable.closeTooltip()
       },
-      handleRowDragSwapEvent (evnt, isSyncRow, dragRow, prevDragRow, prevDragPos, prevDragToChild) {
+      handleRowDragSwapEvent (evnt, isSyncRow, dragRow, prevDragRow, prevDragPos, prevDragToChild): Promise<{
+        status: boolean
+      }> {
         const { treeConfig, dragConfig } = props
         const rowDragOpts = computeRowDragOpts.value
         const { afterFullData, tableFullData, fullAllDataRowIdData } = internalData
@@ -11916,7 +11922,6 @@ export default defineVxeComponent({
             if (!status) {
               return errRest
             }
-
             // 如果为树结构
             if (treeConfig) {
               if (transform) {
@@ -11971,7 +11976,7 @@ export default defineVxeComponent({
 
             $xeTable.handleClearStack()
             $xeTable.handleTableData(treeConfig && transform)
-            $xeTable.cacheRowMap(false)
+            $xeTable.cacheRowMap(false, false)
             updateScrollYStatus()
             if (!(treeConfig && transform)) {
               $xeTable.updateAfterDataIndex()
@@ -12329,29 +12334,62 @@ export default defineVxeComponent({
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
         const { prevDragRow, prevDragPos } = internalData
         const rowDragOpts = computeRowDragOpts.value
-        const { isCrossTableDrag } = rowDragOpts
+        const { isCrossDrag, isCrossTableDrag, isAutoExpandToChild, isAutoLazyLoadToChild } = rowDragOpts
+        const childrenField = treeOpts.children || treeOpts.childrenField
         // 跨表拖拽
-        if (isCrossTableDrag && crossTableDragRowObj) {
+        if (isCrossTableDrag && (!treeConfig || isCrossDrag) && crossTableDragRowObj) {
           const { $newTable } = crossTableDragRowObj
           if ($newTable && $newTable.xID !== $xeTable.xID) {
             $newTable.handleCrossTableRowDragInsertEvent(evnt)
             return
           }
         }
-        if (treeConfig && lazy && prevDragToChild) {
+        if (treeConfig && prevDragToChild) {
           // 懒加载
-          const newRowid = getRowid($xeTable, prevDragRow)
-          const rowRest = fullAllDataRowIdData[newRowid]
-          if (prevDragRow[hasChildField]) {
-            if (rowRest && rowRest.treeLoaded) {
+          const prevRowid = getRowid($xeTable, prevDragRow)
+          const rowRest = fullAllDataRowIdData[prevRowid]
+          if (!rowRest) {
+            handleRowDragEndClearStatus()
+            return
+          }
+          const hasLazyChilds = prevDragRow[hasChildField]
+          const rowChilds = prevDragRow[childrenField]
+          // 如果懒加载节点未被加载
+          if (isAutoExpandToChild) {
+            // 判断目标节点是否有树子级
+            if ((lazy && hasLazyChilds) || (rowChilds && rowChilds.length)) {
+              hideDropTip()
+              $xeTable.setTreeExpand(prevDragRow, true).then(() => {
+                $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
+              })
+              return
+            }
+            $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild).then(() => {
+              if (!$xeTable.isTreeExpandByRow(prevDragRow)) {
+                $xeTable.setTreeExpand(prevDragRow, true)
+              }
+            })
+            return
+          }
+          // 如果是懒加载节点。只加载不自动展开
+          if ((lazy && hasLazyChilds) && isAutoLazyLoadToChild) {
+            if (rowChilds && rowChilds.length) {
               $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
+              return
             }
-          } else {
-            $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
+            hideDropTip()
+            $xeTable.reloadTreeExpand(prevDragRow, false).then(() => {
+              $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
+            })
+            return
+          }
+          // 懒加载的行默认需要先展开过后才允许拖拽，除非启用 isAutoExpandToChild | isAutoLazyLoadToChild
+          if (lazy && hasLazyChilds && !rowRest.treeLoaded) {
+            handleRowDragEndClearStatus()
+            return
           }
-        } else {
-          $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
         }
+        $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
       },
       handleRowDragDragoverEvent (evnt) {
         const { treeConfig } = props
@@ -12361,7 +12399,7 @@ export default defineVxeComponent({
         const { lazy, transform, parentField } = treeOpts
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
         const rowDragOpts = computeRowDragOpts.value
-        const { isPeerDrag, isCrossDrag, isToChildDrag, isCrossTableDrag } = rowDragOpts
+        const { isPeerDrag, isCrossDrag, isToChildDrag, isCrossTableDrag, isAutoLazyLoadToChild, isAutoExpandToChild } = rowDragOpts
         if (!dragRow && !(isCrossTableDrag && (!treeConfig || isCrossDrag) && crossTableDragRowObj)) {
           evnt.preventDefault()
           return
@@ -12404,7 +12442,7 @@ export default defineVxeComponent({
             }
           }
           if ($xeTable.eqRow(dragRow, row) ||
-            (isControlKey && treeConfig && lazy && row[hasChildField] && rowRest && !rowRest.treeLoaded) ||
+            (isControlKey && treeConfig && lazy && row[hasChildField] && (rowRest && !rowRest.treeLoaded) && !isAutoLazyLoadToChild && !isAutoExpandToChild) ||
             (!isCrossDrag && treeConfig && transform && (isPeerDrag ? dragRow[parentField] !== row[parentField] : rowRest.level))
           ) {
             showDropTip(evnt, trEl, null, false, dragPos)
@@ -14407,12 +14445,20 @@ export default defineVxeComponent({
          * 隐藏列
          */
         h('div', {
+          key: 'tss',
           class: 'vxe-table-slots'
         }, slots.default ? slots.default({}) : []),
         h('div', {
+          key: 'tvr',
           ref: refVarElem,
           class: 'vxe-table-vars'
         }, [
+          h('div', {
+            class: 'vxe-table-var-xlarge'
+          }),
+          h('div', {
+            class: 'vxe-table-var-large'
+          }),
           h('div', {
             class: 'vxe-table-var-default'
           }),

package/styles/components/table-module/filter.scss

@@ -1,5 +1,25 @@
 @use '../../helpers/baseMixin.scss';
 
+
+.vxe-table--filter-wrapper {
+  --vxe-ui-table-filter-current-font-size: var(--vxe-ui-font-size-default);
+  &.size--xlarge {
+    --vxe-ui-table-filter-current-font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-table-filter-current-font-size: var(--vxe-ui-font-size-large);
+  }
+  &.size--medium {
+    --vxe-ui-table-filter-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-table-filter-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-table-filter-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
+
 .vxe-cell--filter {
   padding: 0 0.1em 0 0.2em;
   text-align: center;
@@ -42,9 +62,14 @@
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 15;
   max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
+  &[class^="size--"],
+  &[class*=" size--"] {
+    font-size: var(--vxe-ui-table-filter-current-font-size);
+  }
   &:not(.is--multiple) {
     .vxe-table--filter-header,
-    .vxe-table--filter-body {
+    .vxe-table--filter-body,
+    .vxe-table--scrollbar-filter-body {
       text-align: center;
     }
   }
@@ -128,15 +153,3 @@
 .vxe-table--filter-option {
   @include baseMixin.createCheckboxIcon();
 }
-
-.vxe-table--filter-wrapper {
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}

package/styles/components/table.scss

@@ -71,6 +71,12 @@ $btnThemeList: (
   overflow: hidden;
   user-select: none;
   pointer-events: none;
+  .vxe-table-var-xlarge {
+    height: var(--vxe-ui-table-row-height-xlarge);
+  }
+  .vxe-table-var-large {
+    height: var(--vxe-ui-table-row-height-large);
+  }
   .vxe-table-var-default {
     height: var(--vxe-ui-table-row-height-default);
   }

package/styles/theme/base.scss

@@ -40,6 +40,7 @@
   --vxe-ui-table-row-height-medium: 44px;
   --vxe-ui-table-row-height-small: 40px;
   --vxe-ui-table-row-height-mini: 36px;
+
   --vxe-ui-table-row-line-height: 22px;
 
   --vxe-ui-table-column-icon-border-color: #c0c4cc;