vxe-table 3.20.10 → 3.20.12

package/packages/table/src/methods.ts

@@ -1006,8 +1006,8 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
   const { mouseConfig } = props
-  const { isGroup, currentRow, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData
-  const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData
+  const { isGroup, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData
+  const { visibleColumn, tableHeight, elemStore, currentRow, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData
   const $xeGanttView = internalData.xeGanttView
   const el = $xeTable.$refs.refElem as HTMLDivElement
   if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
@@ -1394,7 +1394,7 @@ function handleDefaultRadioChecked ($xeTable: VxeTableConstructor & VxeTablePriv
     const { checkRowKey: rowid, reserve } = radioOpts
     if (rowid) {
       if (fullDataRowIdData[rowid]) {
-        handleCheckedRadioRow(fullDataRowIdData[rowid].row, true)
+        handleCheckedRadioRow($xeTable, fullDataRowIdData[rowid].row, true)
       }
       if (reserve) {
         const rowkey = getRowkey($xeTable)
@@ -1454,7 +1454,7 @@ function handleCheckboxReserveRow ($xeTable: VxeTableConstructor & VxeTablePriva
   }
 }
 
-function handleCheckedRadioRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any, isForce?: boolean) {
+function handleCheckedRadioRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any, isForce: boolean) {
   const reactData = $xeTable as unknown as TableReactData
 
   const radioOpts = $xeTable.computeRadioOpts
@@ -1636,8 +1636,8 @@ function handleReserveStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const internalData = $xeTable as unknown as TableInternalData
 
   const { treeConfig } = props
-  const { expandColumn, currentRow, selectRadioRow } = reactData
-  const { fullDataRowIdData, fullAllDataRowIdData, radioReserveRow, selectCheckboxMaps, treeExpandedMaps, rowExpandedMaps } = internalData
+  const { expandColumn, selectRadioRow } = reactData
+  const { fullDataRowIdData, fullAllDataRowIdData, radioReserveRow, selectCheckboxMaps, treeExpandedMaps, rowExpandedMaps, currentRow } = internalData
   const expandOpts = $xeTable.computeExpandOpts
   const treeOpts = $xeTable.computeTreeOpts
   const radioOpts = $xeTable.computeRadioOpts
@@ -1661,7 +1661,7 @@ function handleReserveStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMet
     handleCheckedCheckboxRow($xeTable, handleReserveRow($xeTable, internalData.checkboxReserveRowMap), true, true)
   }
   if (currentRow && !fullAllDataRowIdData[getRowid($xeTable, currentRow)]) {
-    reactData.currentRow = null // 刷新当前行状态
+    internalData.currentRow = null // 刷新当前行状态
   }
   // 行展开
   internalData.rowExpandedMaps = expandColumn ? getRecoverRowMaps($xeTable, rowExpandedMaps) : {} // 刷新行展开状态
@@ -2556,10 +2556,13 @@ const calcCellHeight = ($xeTable: VxeTableConstructor) => {
   const { treeConfig } = props
   const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData
   const { fullAllDataRowIdData } = internalData
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientWidth) {
+    return
+  }
   const treeOpts = $xeTable.computeTreeOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
-  const el = $xeTable.$refs.refElem as HTMLDivElement
-  if (el && !isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine))) {
+  if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine))) {
     const { handleGetRowId } = createHandleGetRowId($xeTable)
     el.setAttribute('data-calc-row', 'Y')
     tableData.forEach(row => {
@@ -3047,6 +3050,10 @@ function calcScrollbar ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   const { scrollXWidth, scrollYHeight } = reactData
   const { elemStore } = internalData
   const scrollbarOpts = $xeTable.computeScrollbarOpts
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientWidth) {
+    return
+  }
   const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
   const headerTableElem = getRefElem(elemStore['main-header-table'])
   const footerTableElem = getRefElem(elemStore['main-footer-table'])
@@ -3135,9 +3142,11 @@ function handleRecalculateStyle ($xeTable: VxeTableConstructor & VxeTablePrivate
 }
 
 function handleLazyRecalculate ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, reFull: boolean, reWidth: boolean, reHeight: boolean) {
+  const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
   return new Promise<void>(resolve => {
+    const { customStore } = reactData
     const { rceTimeout, rceRunTime } = internalData
     const $xeGanttView = internalData.xeGanttView
     const resizeOpts = $xeTable.computeResizeOpts
@@ -3147,6 +3156,9 @@ function handleLazyRecalculate ($xeTable: VxeTableConstructor & VxeTablePrivateM
       autoCellWidth($xeTable)
       updateRowExpandStyle($xeTable)
     }
+    if (customStore.visible && $xeTable.handleCustomStyle) {
+      $xeTable.handleCustomStyle()
+    }
     if (rceTimeout) {
       clearTimeout(rceTimeout)
       if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -4198,6 +4210,10 @@ function updateColumnOffsetLeft ($xeTable: VxeTableConstructor & VxeTablePrivate
   const internalData = $xeTable as unknown as TableInternalData
 
   const { visibleColumn, fullColumnIdData } = internalData
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientWidth) {
+    return
+  }
   let offsetLeft = 0
   for (let cIndex = 0, rLen = visibleColumn.length; cIndex < rLen; cIndex++) {
     const column = visibleColumn[cIndex]
@@ -4216,6 +4232,10 @@ function updateRowOffsetTop ($xeTable: VxeTableConstructor & VxeTablePrivateMeth
 
   const { expandColumn } = reactData
   const { afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientWidth) {
+    return
+  }
   const expandOpts = $xeTable.computeExpandOpts
   const rowOpts = $xeTable.computeRowOpts
   const cellOpts = $xeTable.computeCellOpts
@@ -4243,6 +4263,10 @@ function updateRowExpandStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMe
   const internalData = $xeTable as unknown as TableInternalData
 
   const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientWidth) {
+    return
+  }
   const expandOpts = $xeTable.computeExpandOpts
   const rowOpts = $xeTable.computeRowOpts
   const cellOpts = $xeTable.computeCellOpts
@@ -4310,6 +4334,10 @@ function updateTreeLineStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   }
   const { tableData } = reactData
   const { fullAllDataRowIdData, treeExpandedMaps } = internalData
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientWidth) {
+    return
+  }
   const cellOpts = $xeTable.computeCellOpts
   const rowOpts = $xeTable.computeRowOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
@@ -4432,6 +4460,23 @@ function handleColumnVisible (visible: boolean) {
   }
 }
 
+function reUpdateCustomStyleEvent ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: MouseEvent) {
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { customStore } = reactData
+  const customOpts = $xeTable.computeCustomOpts
+  const { popupOptions } = customOpts
+  const { transfer } = popupOptions || {}
+  if (transfer && customStore.visible) {
+    const tableCustom = $xeTable.$refs.refTableCustom as Vue
+    if (tableCustom && $xeTable.handleCustomStyle && !checkTargetElement(evnt.target, [tableCustom.$el as HTMLDivElement], evnt.currentTarget)) {
+      $xeTable.handleCustomStyle().then(() => {
+        $xeTable.handleCustomStyle()
+      })
+    }
+  }
+}
+
 const tableMethods: any = {
   callSlot (slotFunc: any, params: any, h: any, vNodes: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -7151,6 +7196,11 @@ const tableMethods: any = {
     $xeTable.closeFilter()
     $xeTable.closeMenu()
   },
+  handleGlobalScrollEvent (evnt: MouseEvent) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    reUpdateCustomStyleEvent($xeTable, evnt)
+  },
   /**
    * 全局滚动事件
    */
@@ -7158,7 +7208,9 @@ const tableMethods: any = {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     $xeTable.closeTooltip()
-    $xeTable.closeMenu()
+    if ($xeTable.closeMenu) {
+      $xeTable.closeMenu()
+    }
   },
   /**
    * 表格键盘事件
@@ -7217,8 +7269,8 @@ const tableMethods: any = {
     if (internalData.isActivated) {
       $xeTable.preventEvent(evnt, 'event.keydown', null, () => {
         const { mouseConfig, keyboardConfig, treeConfig, editConfig, highlightCurrentRow, highlightCurrentColumn } = props
-        const { ctxMenuStore, editStore, currentRow } = reactData
-        const { afterFullData, visibleColumn } = internalData
+        const { ctxMenuStore, editStore } = reactData
+        const { afterFullData, visibleColumn, currentRow } = internalData
         const isContentMenu = $xeTable.computeIsContentMenu
         const bodyMenu = $xeTable.computeBodyMenu
         const keyboardOpts = $xeTable.computeKeyboardOpts
@@ -8614,14 +8666,14 @@ const tableMethods: any = {
       let newValue = row
       let isChange = oldValue !== newValue
       if (strict) {
-        handleCheckedRadioRow($xeTable, newValue)
+        handleCheckedRadioRow($xeTable, newValue, false)
       } else {
         if (oldValue === newValue) {
           newValue = null
         }
         isChange = oldValue !== newValue
         if (isChange && newValue) {
-          handleCheckedRadioRow($xeTable, newValue)
+          handleCheckedRadioRow($xeTable, newValue, false)
         } else {
           newValue = null
           $xeTable.clearRadioRow()
@@ -8672,9 +8724,9 @@ const tableMethods: any = {
   },
   triggerCurrentRowEvent (evnt: Event, params: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { currentRow: oldValue } = reactData
+    const { currentRow: oldValue } = internalData
     const rowOpts = $xeTable.computeRowOpts
     const currentRowOpts = $xeTable.computeCurrentRowOpts
     const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
@@ -8781,12 +8833,11 @@ const tableMethods: any = {
    */
   clearCurrentRow () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
     const $xeGanttView = internalData.xeGanttView
     const el = $xeTable.$refs.refElem as HTMLDivElement
-    reactData.currentRow = null
+    internalData.currentRow = null
     internalData.hoverRow = null
     if (el) {
       XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
@@ -8809,11 +8860,9 @@ const tableMethods: any = {
   getCurrentRecord (isFull?: boolean) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const props = $xeTable
-    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { currentRow } = reactData
-    const { fullDataRowIdData, afterFullRowMaps } = internalData
+    const { fullDataRowIdData, afterFullRowMaps, currentRow } = internalData
     const rowOpts = $xeTable.computeRowOpts
     if (rowOpts.isCurrent || props.highlightCurrentRow) {
       const rowid = getRowid($xeTable, currentRow)
@@ -12310,7 +12359,7 @@ const tableMethods: any = {
       rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
     }
     reactData.scrollYTop = scrollYTop
-    reactData.scrollYHeight = ySpaceHeight
+    reactData.scrollYHeight = isScrollYBig ? sYHeight : ySpaceHeight
     reactData.isScrollYBig = isScrollYBig
 
     calcScrollbar($xeTable)

package/packages/table/src/table.ts

@@ -1953,6 +1953,7 @@ export default {
     globalEvents.on($xeTable, 'mousewheel', this.handleGlobalMousewheelEvent)
     globalEvents.on($xeTable, 'keydown', this.handleGlobalKeydownEvent)
     globalEvents.on($xeTable, 'resize', this.handleGlobalResizeEvent)
+    globalEvents.on($xeTable, 'scroll', this.handleGlobalScrollEvent)
     globalEvents.on($xeTable, 'contextmenu', this.handleGlobalContextmenuEvent)
     $xeTable.preventEvent(null, 'created')
   },
@@ -2096,6 +2097,10 @@ export default {
     if (popupWrapperEl && popupWrapperEl.parentElement) {
       popupWrapperEl.parentElement.removeChild(popupWrapperEl)
     }
+    const customPopupToElem = $xeTable.$refs.refCustomPopupToElem as HTMLDivElement
+    if (customPopupToElem && customPopupToElem.parentElement) {
+      customPopupToElem.parentElement.removeChild(customPopupToElem)
+    }
 
     const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
     if (tableViewportEl) {
@@ -2118,6 +2123,7 @@ export default {
     globalEvents.off($xeTable, 'mousewheel')
     globalEvents.off($xeTable, 'keydown')
     globalEvents.off($xeTable, 'resize')
+    globalEvents.off($xeTable, 'scroll')
     globalEvents.off($xeTable, 'contextmenu')
 
     $xeTable.preventEvent(null, 'beforeDestroy')
@@ -2175,8 +2181,6 @@ export default {
     const columnDragOpts = $xeTable.computeColumnDragOpts
     const scrollbarXToTop = $xeTable.computeScrollbarXToTop
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
-    const customSimpleMode = $xeTable.computeCustomSimpleMode
-    const showCustomSimpleOutside = customSimpleMode === 'outside'
     const { isCrossTableDrag } = rowDragOpts
     const tbOns: {
       contextmenu: (...args: any[]) => void
@@ -2329,18 +2333,6 @@ export default {
                 })
               ]
             : []),
-          /**
-           * 自定义列
-           */
-          !showCustomSimpleOutside && initStore.custom
-            ? h(TableCustomPanelComponent, {
-              key: 'cs',
-              ref: 'refTableCustom',
-              props: {
-                customStore
-              }
-            })
-            : renderEmptyElement($xeTable),
           /**
            * 加载中
            */
@@ -2373,15 +2365,16 @@ export default {
         ])
       ]),
       h('div', {
-        key: 'tpw'
+        key: 'fpw',
+        ref: 'refCustomContainerElem'
       }, [
         h('div', {
-          ref: 'refPopupWrapperElem'
+          ref: 'refCustomPopupToElem'
         }, [
           /**
            * 自定义列
            */
-          showCustomSimpleOutside && initStore.custom
+          initStore.custom
             ? h(TableCustomPanelComponent, {
               key: 'cs',
               ref: 'refTableCustom',
@@ -2389,7 +2382,15 @@ export default {
                 customStore
               }
             })
-            : renderEmptyElement($xeTable),
+            : renderEmptyElement($xeTable)
+        ])
+      ]),
+      h('div', {
+        key: 'tpw'
+      }, [
+        h('div', {
+          ref: 'refPopupWrapperElem'
+        }, [
           /**
            * 筛选
            */

package/packages/table/src/util.ts

@@ -90,6 +90,9 @@ export function createInternalData (): TableInternalData {
     fullColumnIdData: {},
     fullColumnFieldData: {},
 
+    // 当前行
+    currentRow: null,
+
     // 合并表头单元格的数据
     mergeHeaderList: [],
     mergeHeaderMaps: {},
@@ -142,6 +145,7 @@ export function createInternalData (): TableInternalData {
 
     teleportToWrapperElem: null,
     popupToWrapperElem: null,
+    customPopupToElem: null,
 
     lastSTime: 0,
 
@@ -188,8 +192,6 @@ export function createReactData (): TableReactData {
     isAllSelected: false,
     // 复选框属性，有选中且非全选状态
     isIndeterminate: false,
-    // 当前行
-    currentRow: null,
     // 单选框属性，选中列
     currentColumn: null,
     // 单选框属性，选中行
@@ -225,7 +227,7 @@ export function createReactData (): TableReactData {
       activeWrapper: false,
       visible: false,
       maxHeight: null,
-      popupTop: 0,
+      popupStyle: {},
       oldSortMaps: {},
       oldFixedMaps: {},
       oldVisibleMaps: {}
@@ -395,6 +397,8 @@ export function createReactData (): TableReactData {
     resizeWidthFlag: 1,
 
     isCustomStatus: false,
+    isCustomDragStatus: true,
+    ctPopupFlag: 1,
 
     isCrossDragRow: false,
     dragRow: null,

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

@@ -64,6 +64,7 @@
   text-align: left;
   background-color: var(--vxe-ui-layout-background-color);
   z-index: 19;
+  color: var(--vxe-ui-font-color);
   border: 1px solid var(--vxe-ui-table-border-color);
   border-radius: var(--vxe-ui-border-radius);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
@@ -525,4 +526,17 @@
 }
 .vxe-table-custom-popup--table-col-fixed {
   width: 200px;
+}
+
+.vxe-table-custom-wrapper {
+  font-size: var(--vxe-ui-font-size-default);
+  &.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);
+  }
 }