vxe-table 4.16.0-beta.3 → 4.16.0-beta.5

package/packages/table/module/custom/panel.ts

@@ -1,4 +1,4 @@
-import { h, inject, ref, Ref, provide, VNode, PropType, nextTick, TransitionGroup, createCommentVNode, reactive } from 'vue'
+import { h, inject, ref, Ref, provide, VNode, PropType, nextTick, TransitionGroup, createCommentVNode, reactive, Teleport, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText } from '../../../ui/src/utils'
@@ -11,6 +11,17 @@ import type { VxeTableDefines, VxeTablePrivateMethods, VxeTableConstructor, VxeT
 
 const { getI18n, getIcon, renderEmptyElement } = VxeUI
 
+export function createInternalData (): TableCustomPanelInternalData {
+  return {
+    // teleportTo: undefined,
+    // prevDragCol: undefined,
+    // prevDragGroupField: undefined,
+    // prevDragAggFnColid: undefined,
+    // prevDragToChild: false,
+    // prevDragPos: null
+  }
+}
+
 export default defineVxeComponent({
   name: 'TableCustomPanel',
   props: {
@@ -46,13 +57,7 @@ export default defineVxeComponent({
       dragTipText: ''
     })
 
-    const customPanelInternalData: TableCustomPanelInternalData = {
-      // prevDragCol: undefined,
-      // prevDragGroupField: undefined,
-      // prevDragAggFnColid: undefined,
-      // prevDragToChild: false,
-      // prevDragPos: null
-    }
+    let customPanelInternalData = createInternalData()
 
     const refMaps: TableCustomPanelPrivateRef = {
       refElem,
@@ -604,6 +609,7 @@ export default defineVxeComponent({
       const { customStore } = props
       const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps
       const { isCustomStatus, customColumnList } = tableReactData
+      const { teleportToWrapperElem } = tableInternalData
       const customOpts = computeCustomOpts.value
       const { immediate } = customOpts
       const columnDragOpts = computeColumnDragOpts.value
@@ -745,141 +751,146 @@ export default defineVxeComponent({
           )
         }
       })
-      return h('div', {
-        ref: refElem,
-        key: 'simple',
-        class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
-          'is--active': customStore.visible
-        }],
-        style: maxHeight && !['left', 'right'].includes(placement || '')
-          ? {
-              maxHeight: `${maxHeight}px`
-            }
-          : {}
-      }, customStore.visible
-        ? [
-            h('div', {
-              ref: refBodyWrapperElem,
-              class: 'vxe-table-custom-simple--body-wrapper'
-            }, [
-              !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
-                ? h($xeTable.getPivotTableAggregateSimplePanel(), {
-                  customStore
-                })
-                : renderEmptyElement($xeTable),
+      return h(Teleport, {
+        to: teleportToWrapperElem,
+        disabled: !($xeGantt && teleportToWrapperElem)
+      }, [
+        h('div', {
+          ref: refElem,
+          key: 'simple',
+          class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
+            'is--active': customStore.visible
+          }],
+          style: maxHeight && !['left', 'right'].includes(placement || '')
+            ? {
+                maxHeight: `${maxHeight}px`
+              }
+            : {}
+        }, customStore.visible
+          ? [
               h('div', {
-                ref: refCustomBodyElem,
-                class: 'vxe-table-custom--handle-wrapper'
+                ref: refBodyWrapperElem,
+                class: 'vxe-table-custom-simple--body-wrapper'
               }, [
+                !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
+                  ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+                    customStore
+                  })
+                  : renderEmptyElement($xeTable),
                 h('div', {
-                  class: 'vxe-table-custom--header'
-                }, headerSlot
-                  ? $xeTable.callSlot(headerSlot, params)
-                  : [
-                      h('ul', {
-                        class: 'vxe-table-custom--panel-list'
-                      }, [
-                        h('li', {
-                          class: 'vxe-table-custom--option'
+                  ref: refCustomBodyElem,
+                  class: 'vxe-table-custom--handle-wrapper'
+                }, [
+                  h('div', {
+                    class: 'vxe-table-custom--header'
+                  }, headerSlot
+                    ? $xeTable.callSlot(headerSlot, params)
+                    : [
+                        h('ul', {
+                          class: 'vxe-table-custom--panel-list'
                         }, [
-                          allowVisible
-                            ? h('div', {
-                              class: ['vxe-table-custom--checkbox-option', {
-                                'is--checked': isAllChecked,
-                                'is--indeterminate': isAllIndeterminate
-                              }],
-                              title: getI18n('vxe.table.allTitle'),
-                              onClick: allOptionEvent
-                            }, [
-                              h('span', {
-                                class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                              }),
-                              h('span', {
+                          h('li', {
+                            class: 'vxe-table-custom--option'
+                          }, [
+                            allowVisible
+                              ? h('div', {
+                                class: ['vxe-table-custom--checkbox-option', {
+                                  'is--checked': isAllChecked,
+                                  'is--indeterminate': isAllIndeterminate
+                                }],
+                                title: getI18n('vxe.table.allTitle'),
+                                onClick: allOptionEvent
+                              }, [
+                                h('span', {
+                                  class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                                }),
+                                h('span', {
+                                  class: 'vxe-checkbox--label'
+                                }, getI18n('vxe.toolbar.customAll'))
+                              ])
+                              : h('span', {
                                 class: 'vxe-checkbox--label'
-                              }, getI18n('vxe.toolbar.customAll'))
-                            ])
-                            : h('span', {
-                              class: 'vxe-checkbox--label'
-                            }, getI18n('vxe.table.customTitle'))
+                              }, getI18n('vxe.table.customTitle'))
+                          ])
                         ])
-                      ])
-                    ]),
-                h('div', {
-                  class: 'vxe-table-custom--body'
-                }, [
-                  topSlot
-                    ? h('div', {
-                      class: 'vxe-table-custom--panel-top'
-                    }, $xeTable.callSlot(topSlot, params))
-                    : renderEmptyElement($xeTable),
-                  defaultSlot
-                    ? h('div', {
-                      class: 'vxe-table-custom--panel-body'
-                    }, $xeTable.callSlot(defaultSlot, params))
-                    : h(TransitionGroup, {
-                      class: 'vxe-table-custom--panel-list',
-                      name: 'vxe-table-custom--list',
-                      tag: 'ul',
-                      ...customWrapperOns
-                    }, {
-                      default: () => colVNs
-                    }),
-                  bottomSlot
+                      ]),
+                  h('div', {
+                    class: 'vxe-table-custom--body'
+                  }, [
+                    topSlot
+                      ? h('div', {
+                        class: 'vxe-table-custom--panel-top'
+                      }, $xeTable.callSlot(topSlot, params))
+                      : renderEmptyElement($xeTable),
+                    defaultSlot
+                      ? h('div', {
+                        class: 'vxe-table-custom--panel-body'
+                      }, $xeTable.callSlot(defaultSlot, params))
+                      : h(TransitionGroup, {
+                        class: 'vxe-table-custom--panel-list',
+                        name: 'vxe-table-custom--list',
+                        tag: 'ul',
+                        ...customWrapperOns
+                      }, {
+                        default: () => colVNs
+                      }),
+                    bottomSlot
+                      ? h('div', {
+                        class: 'vxe-table-custom--panel-bottom'
+                      }, $xeTable.callSlot(bottomSlot, params))
+                      : renderEmptyElement($xeTable)
+                  ]),
+                  customOpts.showFooter
                     ? h('div', {
-                      class: 'vxe-table-custom--panel-bottom'
-                    }, $xeTable.callSlot(bottomSlot, params))
-                    : renderEmptyElement($xeTable)
-                ]),
-                customOpts.showFooter
-                  ? h('div', {
-                    class: 'vxe-table-custom--footer'
-                  }, footerSlot
-                    ? $xeTable.callSlot(footerSlot, params)
-                    : [
-                        h('div', {
-                          class: 'vxe-table-custom--footer-buttons'
-                        }, [
-                          VxeUIButtonComponent
-                            ? h(VxeUIButtonComponent, {
-                              mode: 'text',
-                              content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
-                              disabled: !isCustomStatus,
-                              onClick: resetCustomEvent
-                            })
-                            : createCommentVNode(),
-                          immediate
-                            ? (VxeUIButtonComponent
-                                ? h(VxeUIButtonComponent, {
-                                  mode: 'text',
-                                  content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
-                                  onClick: cancelCloseEvent
-                                })
-                                : createCommentVNode())
-                            : (VxeUIButtonComponent
-                                ? h(VxeUIButtonComponent, {
-                                  mode: 'text',
-                                  content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
-                                  onClick: cancelCustomEvent
-                                })
-                                : createCommentVNode()),
-                          immediate
-                            ? createCommentVNode()
-                            : (VxeUIButtonComponent
-                                ? h(VxeUIButtonComponent, {
-                                  mode: 'text',
-                                  status: 'primary',
-                                  content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
-                                  onClick: confirmCustomEvent
-                                })
-                                : createCommentVNode())
+                      class: 'vxe-table-custom--footer'
+                    }, footerSlot
+                      ? $xeTable.callSlot(footerSlot, params)
+                      : [
+                          h('div', {
+                            class: 'vxe-table-custom--footer-buttons'
+                          }, [
+                            VxeUIButtonComponent
+                              ? h(VxeUIButtonComponent, {
+                                mode: 'text',
+                                content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+                                disabled: !isCustomStatus,
+                                onClick: resetCustomEvent
+                              })
+                              : createCommentVNode(),
+                            immediate
+                              ? (VxeUIButtonComponent
+                                  ? h(VxeUIButtonComponent, {
+                                    mode: 'text',
+                                    content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                                    onClick: cancelCloseEvent
+                                  })
+                                  : createCommentVNode())
+                              : (VxeUIButtonComponent
+                                  ? h(VxeUIButtonComponent, {
+                                    mode: 'text',
+                                    content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                                    onClick: cancelCustomEvent
+                                  })
+                                  : createCommentVNode()),
+                            immediate
+                              ? createCommentVNode()
+                              : (VxeUIButtonComponent
+                                  ? h(VxeUIButtonComponent, {
+                                    mode: 'text',
+                                    status: 'primary',
+                                    content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                                    onClick: confirmCustomEvent
+                                  })
+                                  : createCommentVNode())
+                          ])
                         ])
-                      ])
-                  : null
-              ]),
-              renderDragTip()
-            ])
-          ]
-        : [])
+                    : null
+                ]),
+                renderDragTip()
+              ])
+            ]
+          : [])
+      ])
     }
 
     const renderPopupPanel = () => {
@@ -1305,6 +1316,10 @@ export default defineVxeComponent({
       renderVN
     }
 
+    onUnmounted(() => {
+      customPanelInternalData = createInternalData()
+    })
+
     provide('$xeTableCustomPanel', $xeTableCustomPanel)
 
     return $xeTableCustomPanel

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

@@ -268,8 +268,8 @@ hooks.add('tableKeyboardModule', {
       const checkboxOpts = computeCheckboxOpts.value
       const mouseOpts = computeMouseOpts.value
       const editOpts = computeEditOpts.value
-      if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaModownEvent) {
-        return $xeTable.triggerCellAreaModownEvent(evnt, params)
+      if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaModnEvent) {
+        return $xeTable.triggerCellAreaModnEvent(evnt, params)
       } else {
         if (checkboxConfig && checkboxOpts.range) {
           handleCheckboxRangeEvent(evnt, params)

package/packages/table/src/cell.ts

@@ -412,6 +412,7 @@ export const Cell = {
     const { field, slots, editRender, cellRender, rowGroupNode, aggFunc } = column
     const renderOpts = editRender || cellRender
     const defaultSlot = slots ? slots.default : null
+    const gcSlot = slots ? (slots.groupContent || slots['group-content']) : null
     let cellValue: string | number | null = ''
     if (isRowGroupStatus && field && row.isAggregate) {
       const aggRow: VxeTableDefines.AggregateRowInfo = row
@@ -441,6 +442,9 @@ export const Cell = {
          */
         totalValue: childCount
       }
+      if (gcSlot) {
+        return renderCellBaseVNs(params, $table.callSlot(gcSlot, Object.assign({ groupField, groupContent, childCount }, params)))
+      }
       if (mode === 'column' ? field === aggRow.groupField : rowGroupNode) {
         cellValue = groupContent
         if (contentMethod) {

package/packages/table/src/table.ts

@@ -2583,7 +2583,7 @@ export default defineVxeComponent({
       if (mouseConfig && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
         $xeTable.addCellSelectedClass()
       }
-      if ($xeGanttView) {
+      if ($xeGanttView && $xeGanttView.handleUpdateStyle) {
         $xeGanttView.handleUpdateStyle()
       }
       return nextTick()
@@ -3257,7 +3257,7 @@ export default defineVxeComponent({
             handleRecalculateStyle(reFull, reWidth, reHeight)
           )
         }
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.handleLazyRecalculate) {
           $xeGanttView.handleLazyRecalculate()
         }
         internalData.rceTimeout = setTimeout(() => {
@@ -3514,6 +3514,7 @@ export default defineVxeComponent({
       }).then(() => {
         computeScrollLoad()
       }).then(() => {
+        const virtualYOpts = computeVirtualYOpts.value
         // 是否启用了虚拟滚动
         if (sYLoad) {
           scrollYStore.endIndex = scrollYStore.visibleSize
@@ -3523,6 +3524,9 @@ export default defineVxeComponent({
           if (reactData.expandColumn && expandOpts.mode !== 'fixed') {
             errLog('vxe.error.notConflictProp', ['column.type="expand', 'expand-config.mode="fixed"'])
           }
+          if (virtualYOpts.mode === 'scroll' && expandOpts.mode === 'fixed') {
+            warnLog('vxe.error.notConflictProp', ['virtual-y-config.mode=scroll', 'expand-config.mode=inside'])
+          }
           // if (showOverflow) {
           //   if (!rowOpts.height) {
           //     const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false)
@@ -3874,7 +3878,7 @@ export default defineVxeComponent({
       // 如果gt为0，则总是启用
       const scrollYLoad = (transform || !treeConfig) && !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt < allList.length)
       reactData.scrollYLoad = scrollYLoad
-      if ($xeGanttView) {
+      if ($xeGanttView && $xeGanttView.handleUpdateSYStatus) {
         $xeGanttView.handleUpdateSYStatus(scrollYLoad)
       }
       return scrollYLoad
@@ -5139,6 +5143,28 @@ export default defineVxeComponent({
         }
         return []
       },
+      /**
+       * 只对 tree-config 有效，用于树形结构，获取指定行的层级
+       */
+      getTreeRowLevel (rowOrRowid) {
+        const { treeConfig } = props
+        const { fullAllDataRowIdData } = internalData
+        if (rowOrRowid && treeConfig) {
+          let rowid
+          if (XEUtils.isString(rowOrRowid)) {
+            rowid = rowOrRowid
+          } else {
+            rowid = getRowid($xeTable, rowOrRowid)
+          }
+          if (rowid) {
+            const rest = fullAllDataRowIdData[rowid]
+            if (rest) {
+              return rest.level
+            }
+          }
+        }
+        return -1
+      },
       /**
        * 只对 tree-config 有效，获取行的父级
        */
@@ -5154,7 +5180,9 @@ export default defineVxeComponent({
           }
           if (rowid) {
             const rest = fullAllDataRowIdData[rowid]
-            return rest ? rest.parent : null
+            if (rest) {
+              return rest.parent
+            }
           }
         }
         return null
@@ -5819,7 +5847,7 @@ export default defineVxeComponent({
             XEUtils.arrayEach(el.querySelectorAll(`[rowid="${getRowid($xeTable, row)}"]`), elem => addClass(elem, 'row--current'))
           }
         }
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.handleUpdateCurrentRow) {
           $xeGanttView.handleUpdateCurrentRow(row)
         }
         return nextTick()
@@ -5868,7 +5896,7 @@ export default defineVxeComponent({
         if (el) {
           XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
         }
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.handleUpdateCurrentRow) {
           $xeGanttView.handleUpdateCurrentRow()
         }
         return nextTick()
@@ -8097,7 +8125,7 @@ export default defineVxeComponent({
         })
         reactData.tableData = tableData
         internalData.visibleDataRowIdData = visibleDataRowIdMaps
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.updateViewData) {
           $xeGanttView.updateViewData()
         }
         return nextTick()
@@ -11024,7 +11052,7 @@ export default defineVxeComponent({
           if (isScrollXBig && mouseOpts.area) {
             errLog('vxe.error.notProp', ['mouse-config.area'])
           }
-          if ($xeGanttView) {
+          if ($xeGanttView && $xeGanttView.handleUpdateSXSpace) {
             $xeGanttView.handleUpdateSXSpace()
           }
           return nextTick().then(() => {
@@ -11138,7 +11166,7 @@ export default defineVxeComponent({
         if (isScrollYBig && mouseOpts.area) {
           errLog('vxe.error.notProp', ['mouse-config.area'])
         }
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.handleUpdateSYSpace) {
           $xeGanttView.handleUpdateSYSpace()
         }
         return nextTick().then(() => {
@@ -11218,7 +11246,7 @@ export default defineVxeComponent({
           XEUtils.arrayEach(el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'))
         }
         internalData.hoverRow = row
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.handleUpdateHoverRow) {
           $xeGanttView.handleUpdateHoverRow(row)
         }
       },
@@ -11229,7 +11257,7 @@ export default defineVxeComponent({
           XEUtils.arrayEach(el.querySelectorAll('.vxe-body--row.row--hover'), elem => removeClass(elem, 'row--hover'))
         }
         internalData.hoverRow = null
-        if ($xeGanttView) {
+        if ($xeGanttView && $xeGanttView.handleUpdateHoverRow) {
           $xeGanttView.handleUpdateHoverRow()
         }
       },
@@ -12099,6 +12127,7 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
+      const $xeGantt = $xeTable.xeGantt
       const columnOpts = computeColumnOpts.value
       const rowOpts = computeRowOpts.value
       const customOpts = computeCustomOpts.value
@@ -12106,6 +12135,14 @@ export default defineVxeComponent({
       const virtualYOpts = computeVirtualYOpts.value
       const { groupFields } = aggregateOpts
 
+      if ($xeGantt) {
+        const { refClassifyWrapperElem } = $xeGantt.getRefMaps()
+        const classifyWrapperEl = refClassifyWrapperElem.value
+        if (classifyWrapperEl) {
+          internalData.teleportToWrapperElem = classifyWrapperEl
+        }
+      }
+
       if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
         initTpImg()
       }
@@ -12197,7 +12234,7 @@ export default defineVxeComponent({
         if (rowOpts.height && !props.showOverflow) {
           warnLog('vxe.error.notProp', ['table.show-overflow'])
         }
-        if (!$xeTable.triggerCellAreaModownEvent) {
+        if (!$xeTable.triggerCellAreaModnEvent) {
           if (props.areaConfig) {
             warnLog('vxe.error.notProp', ['area-config'])
           }

package/packages/table/src/util.ts

@@ -122,6 +122,8 @@ export function createInternalData (): TableInternalData {
     // 表尾高度
     tFooterHeight: 0,
 
+    teleportToWrapperElem: null,
+
     inited: false,
     tooltipTimeout: null,
     initStatus: false,