vxe-table 4.13.0 → 4.13.2

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

@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
-import { toCssUnit, triggerEvent } from '../../../ui/src/dom'
+import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
 import type { TableFilterMethods, TableFilterPrivateMethods } from '../../../../types'
@@ -76,6 +76,9 @@ hooks.add('tableFilterModule', {
           filterStore.visible = false
         } else {
           const el = refElem.value
+          const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
+          const filterOpts = computeFilterOpts.value
+          const { transfer } = filterOpts
           const tableRect = el.getBoundingClientRect()
           const btnElem = evnt.currentTarget as HTMLDivElement
           const { filters, filterMultiple, filterRender } = column
@@ -107,23 +110,42 @@ hooks.add('tableFilterModule', {
               return
             }
             const tableFilter = refTableFilter.value
-            const filterWrapperElem = tableFilter ? tableFilter.$el as HTMLDivElement : null
+            const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value as HTMLDivElement : null
             if (!filterWrapperElem) {
               return
             }
             const btnRect = btnElem.getBoundingClientRect()
-            const filterWidth = filterWrapperElem.offsetWidth
             const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
             const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
+            const filterWidth = filterWrapperElem.offsetWidth
             const centerWidth = filterWidth / 2
-            const left = btnRect.left - tableRect.left - centerWidth
-            const top = btnRect.top - tableRect.top + btnElem.clientHeight
-            // 判断面板不能大于表格高度
-            const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+            let left = 0
+            let top = 0
+            let maxHeight = 0
+            if (transfer) {
+              left = btnRect.left - centerWidth + scrollLeft
+              top = btnRect.top + btnElem.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
+              }
+            } else {
+              left = btnRect.left - tableRect.left - centerWidth
+              top = btnRect.top - tableRect.top + btnElem.clientHeight
+              maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+              if (left < 1) {
+                left = 1
+              } else if (left > (el.clientWidth - filterWidth - 1)) {
+                left = el.clientWidth - filterWidth - 1
+              }
+            }
             filterStore.style = {
               top: toCssUnit(top),
               left: toCssUnit(left)
             }
+            // 判断面板不能大于表格高度
             filterStore.maxHeight = maxHeight
           })
         }

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

@@ -1,8 +1,9 @@
-import { defineComponent, h, computed, inject } from 'vue'
+import { defineComponent, h, ref, computed, inject, Teleport } from 'vue'
 import { VxeUI } from '../../../ui'
 import { formatText, isEnableConf } from '../../../ui/src/utils'
 import { getPropClass } from '../../../ui/src/dom'
 import { getSlotVNs } from '../../../ui/src/vn'
+import XEUtils from 'xe-utils'
 
 import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../../../../types'
 
@@ -13,11 +14,26 @@ export default defineComponent({
   props: {
     filterStore: Object as any
   },
-  setup (props) {
+  setup (props, context) {
+    const xID = XEUtils.uniqueId()
+
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
     const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable
     const { computeFilterOpts } = getComputeMaps()
 
+    const refElem = ref<HTMLDivElement>()
+
+    const refMaps = {
+      refElem
+    }
+
+    const $xeFilterPanel: any = {
+      xID,
+      props,
+      context,
+      getRefMaps: () => refMaps
+    }
+
     const computeHasCheckOption = computed(() => {
       const { filterStore } = props
       return filterStore && filterStore.options.some((option: any) => option.checked)
@@ -78,7 +94,7 @@ export default defineComponent({
      * Publish methods
      *************************/
 
-    const $panel = {
+    const filterPanelMethods = {
       changeRadioOption,
       changeMultipleOption,
       changeAllOption,
@@ -86,13 +102,14 @@ export default defineComponent({
       confirmFilter,
       resetFilter
     }
+    Object.assign($xeFilterPanel, filterPanelMethods)
 
     const renderOptions = (filterRender: any, compConf: any) => {
       const { filterStore } = props
       const { column, multiple, maxHeight } = filterStore
       const slots = column ? column.slots : null
       const filterSlot = slots ? slots.filter : null
-      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable })
+      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
       const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
       if (filterSlot) {
         return [
@@ -212,24 +229,39 @@ export default defineComponent({
       const filterRender = column ? column.filterRender : null
       const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
       const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : ''
-      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable })
+      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable })
+      const tableProps = $xeTable.props
+      const { computeSize } = $xeTable.getComputeMaps()
+      const vSize = computeSize.value
       const filterOpts = computeFilterOpts.value
-      const { destroyOnClose } = filterOpts
-      return h('div', {
-        class: [
-          'vxe-table--filter-wrapper',
-          'filter--prevent-default',
-          getPropClass(filterClassName, params),
-          {
-            'is--animat': $xeTable.props.animat,
-            'is--multiple': multiple,
-            'is--active': visible
-          }
-        ],
-        style: filterStore.style
-      }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+      const { transfer, destroyOnClose } = filterOpts
+      return h(Teleport, {
+        to: 'body',
+        disabled: !transfer
+      }, [
+        h('div', {
+          ref: refElem,
+          class: [
+            'vxe-table--filter-wrapper',
+            'filter--prevent-default',
+            getPropClass(filterClassName, params),
+            {
+              [`size--${vSize}`]: vSize,
+              'is--animat': tableProps.animat,
+              'is--multiple': multiple,
+              'is--active': visible
+            }
+          ],
+          style: filterStore.style
+        }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+      ])
     }
 
-    return renderVN
+    $xeFilterPanel.renderVN = renderVN
+
+    return $xeFilterPanel
+  },
+  render () {
+    return this.renderVN()
   }
 })

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

@@ -224,7 +224,7 @@ hooks.add('tableMenuModule', {
             }
           }
         }
-        if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
+        if (tableFilter && !getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value).flag) {
           $xeTable.closeFilter()
         }
         menuMethods.closeMenu()

package/packages/table/src/table.ts

@@ -251,6 +251,7 @@ export default defineComponent({
       mergeFootFlag: 1,
 
       rowHeightStore: {
+        large: 52,
         default: 48,
         medium: 44,
         small: 40,
@@ -401,7 +402,7 @@ export default defineComponent({
     const refCommTooltip = ref() as Ref<VxeTooltipInstance>
     const refValidTooltip = ref() as Ref<VxeTooltipInstance>
     const refTableMenu = ref() as Ref<any>
-    const refTableFilter = ref() as Ref<ComponentPublicInstance>
+    const refTableFilter = ref() as Ref<any>
     const refTableCustom = ref() as Ref<ComponentPublicInstance>
 
     const refTableViewportElem = ref<HTMLDivElement>()
@@ -2974,7 +2975,12 @@ export default defineComponent({
         $xeTable.checkSelectionStatus()
         return new Promise<void>(resolve => {
           nextTick()
-            .then(() => $xeTable.recalculate())
+            .then(() => handleRecalculateLayout(false))
+            .then(() => {
+              calcCellHeight()
+              updateRowOffsetTop()
+              return handleRecalculateLayout(false)
+            })
             .then(() => {
               let targetScrollLeft = lastScrollLeft
               let targetScrollTop = lastScrollTop
@@ -2988,8 +2994,7 @@ export default defineComponent({
                 targetScrollTop = 0
               }
               reactData.isRowLoading = false
-              calcCellHeight()
-              updateRowOffsetTop()
+              handleRecalculateLayout(false)
               // 是否变更虚拟滚动
               if (oldScrollYLoad === sYLoad) {
                 restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -5419,12 +5424,10 @@ export default defineComponent({
       closeFilter () {
         const { filterStore } = reactData
         const { column, visible } = filterStore
-        Object.assign(filterStore, {
-          isAllSelected: false,
-          isIndeterminate: false,
-          options: [],
-          visible: false
-        })
+        filterStore.isAllSelected = false
+        filterStore.isIndeterminate = false
+        filterStore.options = []
+        filterStore.visible = false
         if (visible) {
           dispatchEvent('filter-visible', {
             column,
@@ -6177,7 +6180,7 @@ export default defineComponent({
       if (tableFilter) {
         if (getEventTargetNode(evnt, el, 'vxe-cell--filter').flag) {
           // 如果点击了筛选按钮
-        } else if (getEventTargetNode(evnt, tableFilter.$el as HTMLDivElement).flag) {
+        } else if (getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value as HTMLDivElement).flag) {
           // 如果点击筛选容器
         } else {
           if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -8242,6 +8245,10 @@ export default defineComponent({
         const currentColumnOpts = computeCurrentColumnOpts.value
         const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod as any
         const { column: newValue } = params
+        const { trigger } = currentColumnOpts
+        if (trigger === 'manual') {
+          return
+        }
         const isChange = oldValue !== newValue
         if (!beforeRowMethod || beforeRowMethod({ column: newValue, $table: $xeTable })) {
           $xeTable.setCurrentColumn(newValue)
@@ -8258,6 +8265,10 @@ export default defineComponent({
         const currentRowOpts = computeCurrentRowOpts.value
         const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
         const { row: newValue } = params
+        const { trigger } = currentRowOpts
+        if (trigger === 'manual') {
+          return
+        }
         const isChange = oldValue !== newValue
         if (!beforeRowMethod || beforeRowMethod({ row: newValue, $table: $xeTable })) {
           $xeTable.setCurrentRow(newValue)
@@ -8304,10 +8315,10 @@ export default defineComponent({
        * 展开树节点事件
        */
       triggerTreeExpandEvent (evnt, params) {
-        const { treeExpandLazyLoadedMaps } = internalData
+        const { treeExpandLazyLoadedMaps, treeEATime } = internalData
         const treeOpts = computeTreeOpts.value
         const { row, column } = params
-        const { lazy, trigger } = treeOpts
+        const { lazy, trigger, accordion } = treeOpts
         if (trigger === 'manual') {
           return
         }
@@ -8317,7 +8328,17 @@ export default defineComponent({
           const expanded = !$xeTable.isTreeExpandByRow(row)
           const columnIndex = $xeTable.getColumnIndex(column)
           const $columnIndex = $xeTable.getVMColumnIndex(column)
-          $xeTable.setTreeExpand(row, expanded)
+          if (treeEATime) {
+            clearTimeout(treeEATime)
+          }
+          $xeTable.setTreeExpand(row, expanded).then(() => {
+            if (accordion) {
+              internalData.treeEATime = setTimeout(() => {
+                internalData.treeEATime = undefined
+                $xeTable.scrollToRow(row)
+              }, 20)
+            }
+          })
           dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt)
         }
       },
@@ -9141,6 +9162,9 @@ export default defineComponent({
         }
         updateRowExpandStyle()
         checkLastSyncScroll(isRollX, isRollY)
+        if (isRollX) {
+          $xeTable.closeFilter()
+        }
         if (rowOpts.isHover || highlightHoverRow) {
           $xeTable.clearHoverRow()
         }
@@ -9481,7 +9505,6 @@ export default defineComponent({
         }
         const isRollX = scrollLeft !== lastScrollLeft
         const isRollY = true
-
         internalData.inVirtualScroll = true
         setScrollTop(bodyScrollElem, scrollTop)
         setScrollTop(leftScrollElem, scrollTop)
@@ -9592,7 +9615,8 @@ export default defineComponent({
           if (isScrollXBig && mouseOpts.area) {
             errLog('vxe.error.notProp', ['mouse-config.area'])
           }
-          nextTick(() => {
+          calcScrollbar()
+          return nextTick().then(() => {
             updateStyle()
           })
         }
@@ -9688,6 +9712,7 @@ export default defineComponent({
         if (isScrollYBig && mouseOpts.area) {
           errLog('vxe.error.notProp', ['mouse-config.area'])
         }
+        calcScrollbar()
         return nextTick().then(() => {
           updateStyle()
         })
@@ -10600,7 +10625,6 @@ export default defineComponent({
         initTpImg()
       }
 
-      ;(window as any).aa = $xeTable
       nextTick(() => {
         const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props
         const { scrollXStore, scrollYStore } = internalData

package/packages/table/src/util.ts

@@ -407,7 +407,8 @@ export function getRootColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMe
 const lineOffsetSizes = {
   mini: 3,
   small: 2,
-  medium: 1
+  medium: 1,
+  large: 0
 }
 
 const countTreeExpand = (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) => {

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

@@ -33,9 +33,11 @@
   position: absolute;
   top: 0;
   min-width: 100px;
+  font-size: var(--vxe-ui-font-size-default);
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
+  color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
   &:not(.is--multiple) {
@@ -110,3 +112,17 @@
 .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

@@ -1617,10 +1617,12 @@
     height: 1em;
     text-align: center;
     transform: translateY(-50%);
-    // background-color: var(--vxe-ui-layout-background-color);
     z-index: 1;
     user-select: none;
     cursor: pointer;
+    & > i {
+      background-color: var(--vxe-ui-layout-background-color);
+    }
   }
   .vxe-tree--node-btn {
     display: block;
@@ -1650,6 +1652,9 @@
     &.col--rs-height,
     &.col--auto-height {
       overflow: hidden;
+      &.col--tree-node {
+        overflow: unset;
+      }
       & > .vxe-cell {
         overflow: hidden;
       }