vxe-table 3.23.5 → 3.23.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.23.5",
+  "version": "3.23.7",
   "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",
@@ -65,7 +65,7 @@
     "vue-i18n": "^8.15.1",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.6.14",
-    "vxe-pc-ui": "3.17.28"
+    "vxe-pc-ui": "3.18.2"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

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

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
-import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom'
+import { toCssUnit, triggerEvent, updatePanelPlacement } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
 import type { VxeTableConstructor, VxeTableDefines, TableReactData, TableInternalData, VxeColumnPropTypes, VxeTablePrivateMethods } from '../../../../types'
@@ -20,15 +20,12 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   const { filterStore } = reactData
   const { elemStore } = internalData
   const { column, targetEl } = filterStore
-  if (!column || !targetEl) {
+  if (!column) {
     return $xeTable.$nextTick()
   }
   const tableEl = $xeTable.$refs.refElem as HTMLDivElement
-  const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
   const filterOpts = $xeTable.computeFilterOpts
   const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts
-  const currEl = targetEl
-  const tableRect = tableEl.getBoundingClientRect()
   const filterRender = column ? column.filterRender : null
   const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
 
@@ -41,63 +38,86 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   if (!filterWrapperElem) {
     return $xeTable.$nextTick()
   }
-  const btnRect = currEl.getBoundingClientRect()
   const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
   const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
-  const filterWidth = filterWrapperElem.offsetWidth
-  const centerWidth = currEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
-  let left = 0
-  let top = 0
-  let maxHeight: number = 0
+
+  /**
+   * 是否显示筛选按钮图标
+   * 如果不存在图标，则相对单元格居中显示
+   */
+  const handleStyle = () => {
   /**
    * 是否显示筛选按钮图标
    * 如果不存在图标，则相对单元格居中显示
    */
-  if (transfer) {
-    left = btnRect.left - centerWidth + scrollLeft
-    top = btnRect.top + currEl.clientHeight + scrollTop
-    maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28))
-    if (left < 16) {
-      left = 16
-    } else if (left > (visibleWidth - filterWidth - 16)) {
-      left = visibleWidth - filterWidth - 16
+    let currEl = targetEl
+    if (!targetEl) {
+      const headerWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
+      const colEl = headerWrapperElem ? headerWrapperElem.querySelector<HTMLDivElement>(`.vxe-header--column.${column.id}`) : null
+      if (colEl) {
+        currEl = colEl
+      }
     }
-  } else {
-    left = btnRect.left - tableRect.left - centerWidth
-    top = btnRect.top - tableRect.top + currEl.clientHeight
-    maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
-    if (left < 1) {
-      left = 1
-    } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
-      left = tableEl.clientWidth - filterWidth - 1
+    if (!currEl) {
+      return $xeTable.$nextTick()
     }
-    if ($xeGGWrapper) {
-      const wrapperEl = $xeGGWrapper.$refs.refElem as HTMLDivElement
-      if (wrapperEl) {
-        const wrapperRect = wrapperEl.getBoundingClientRect()
-        top += tableRect.top - wrapperRect.top
+
+    const btnRect = currEl.getBoundingClientRect()
+    const tableRect = tableEl.getBoundingClientRect()
+    let left = 0
+    let top = 0
+    let maxHeight = 0
+    let panelStyle: Record<string, string | number> = {}
+    if (transfer) {
+      const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
+        defaultPlacement: 'bottom',
+        isMinWidth: false,
+        teleportTo: transfer
+      })
+      panelStyle = ppObj.style
+    } else {
+      const filterWidth = filterWrapperElem.offsetWidth
+      const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
+      maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+      left = btnRect.left - tableRect.left - centerWidth
+      top = btnRect.top - tableRect.top + currEl.clientHeight
+      if (left < 1) {
+        left = 1
+      } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
+        left = tableEl.clientWidth - filterWidth - 1
+      }
+      if ($xeGGWrapper) {
+        const wrapperEl = $xeGGWrapper.$refs.refElem as HTMLDivElement
+        if (wrapperEl) {
+          const wrapperRect = wrapperEl.getBoundingClientRect()
+          top += tableRect.top - wrapperRect.top
+        }
+      }
+      panelStyle = {
+        top: toCssUnit(top),
+        left: toCssUnit(left)
       }
     }
-  }
-  const fStys: Record<string, any> = {
-    top: toCssUnit(top),
-    left: toCssUnit(left)
-  }
-  if (zIndex) {
-    fStys.zIndex = zIndex
-  }
-  filterStore.style = fStys
-  // 筛选面板是自适应表格高度
-  if (compConf ? !compConf.tableFilterAutoHeight : false) {
-    maxHeight = 0
-  } else {
-    if (customMaxHeight) {
-      maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
+
+    if (zIndex) {
+      panelStyle.zIndex = zIndex
+    }
+    filterStore.style = panelStyle
+    // 筛选面板是自适应表格高度
+    if (compConf ? !compConf.tableFilterAutoHeight : false) {
+      maxHeight = 0
+    } else {
+      if (customMaxHeight) {
+        maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
+      }
     }
+    // 判断面板不能大于表格高度
+    filterStore.maxHeight = maxHeight
   }
-  // 判断面板不能大于表格高度
-  filterStore.maxHeight = maxHeight
-  return $xeTable.$nextTick()
+  handleStyle()
+  return $xeTable.$nextTick().then(() => {
+    handleStyle()
+  })
 }
 
 export default {
@@ -196,14 +216,13 @@ export default {
       if (filterStore.column === column && filterStore.visible) {
         filterStore.visible = false
       } else {
-        const currEl = btnEl || colEl
         $xeTable.handleFilterOptions(column)
         internalData._currFilterParams = params
-        filterStore.targetEl = currEl
+        filterStore.targetEl = btnEl
         filterStore.style = null
         filterStore.visible = true
         initStore.filter = true
-        $xeTable.$nextTick(() => {
+        $xeTable.$nextTick().then(() => {
           updatePopupStyle($xeTable)
         })
       }

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

@@ -403,14 +403,12 @@ export default {
     // 处理当前列方向键移动
     moveCurrentColumn (isLeftArrow: boolean, isRightArrow: boolean, evnt: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-      const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
 
-      const { currentColumn } = reactData
-      const { visibleColumn } = internalData
+      const { currentCol, visibleColumn } = internalData
       let targetCol: VxeTableDefines.ColumnInfo | null = null
-      if (currentColumn) {
-        const _columnIndex = $xeTable.getVTColumnIndex(currentColumn)
+      if (currentCol) {
+        const _columnIndex = $xeTable.getVTColumnIndex(currentCol)
         if (isLeftArrow && _columnIndex > 0) {
           targetCol = visibleColumn[_columnIndex - 1]
         } else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {

package/packages/table/src/body.ts

@@ -108,8 +108,8 @@ function renderTdColumn (
   const $xeGantt = $xeTable.$xeGantt
 
   const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
-  const { tableData, tableColumn, dragRow, overflowX, overflowY, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData
-  const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps } = tableInternalData
+  const { tableData, tableColumn, dragRow, overflowX, overflowY, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps, currColFlag } = tableReactData
+  const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps, currentCol } = tableInternalData
   const cellOpts = $xeTable.computeCellOpts
   const validOpts = $xeTable.computeValidOpts
   const checkboxOpts = $xeTable.computeCheckboxOpts
@@ -483,7 +483,7 @@ function renderTdColumn (
         'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
         'col--valid-error': !!errorValidItem,
         'show--valid-bg': errorValidItem && validOpts.showErrorBackground,
-        'col--current': currentColumn === column
+        'col--current': currColFlag && currentCol === column
       },
       getClass(compCellClassName, cellParams),
       getClass(className, cellParams),

package/packages/table/src/footer.ts

@@ -24,8 +24,8 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
 
   const { fixedType } = props
   const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
-  const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFootFlag } = tableReactData
-  const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData
+  const { scrollXLoad, scrollYLoad, overflowX, mergeFootFlag, currColFlag } = tableReactData
+  const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore, currentCol } = tableInternalData
   const virtualXOpts = $xeTable.computeVirtualXOpts
   const footerTooltipOpts = $xeTable.computeFooterTooltipOpts
   const resizableOpts = $xeTable.resizableOpts
@@ -167,7 +167,7 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
         'is--pg-left': isCellPaddingLeft,
         'is--pg-right': isCellPaddingRight,
         'col--ellipsis': hasEllipsis,
-        'col--current': currentColumn === column
+        'col--current': currColFlag && currentCol === column
       }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
       attrs,
       style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) as VxeComponentStyleType : undefined,

package/packages/table/src/header.ts

@@ -24,8 +24,8 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
 
   const { fixedType } = props
   const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
-  const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn } = tableReactData
-  const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps } = tableInternalData
+  const { dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn, currColFlag } = tableReactData
+  const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps, currentCol } = tableInternalData
   const virtualXOpts = $xeTable.computeVirtualXOpts
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
@@ -186,7 +186,7 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
         'is--filter-active': hasFilter,
         'is--drag-active': columnOpts.drag && !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
         'is--drag-disabled': columnOpts.drag && isDisabledDrag,
-        'col--current': currentColumn === column
+        'col--current': currColFlag && currentCol === column
       }, getClass(headerClassName, cellParams), getClass(headerCellClassName, cellParams)],
       attrs: thAttrs,
       style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) as VxeComponentStyleType : undefined,
@@ -237,8 +237,8 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
 
   const { fixedType } = props
   const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps
-  const { currentColumn, overflowX } = tableReactData
-  const { fullColumnIdData } = tableInternalData
+  const { overflowX, currColFlag } = tableReactData
+  const { fullColumnIdData, currentCol } = tableInternalData
   const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts
   const cellOpts = $xeTable.computeCellOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
@@ -313,7 +313,7 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
         'fixed--width': !isAutoCellWidth,
         'is--padding': isPadding,
         'is--sortable': column.sortable,
-        'col--current': currentColumn === column
+        'col--current': currColFlag && currentCol === column
       }
       ],
       key: colid,