vxe-table 3.15.1 → 3.15.2

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 } from '../../../ui/src/dom'
+import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
 import type { VxeTableConstructor, VxeTableDefines, TableReactData, TableInternalData } from '../../../../types'
@@ -75,6 +75,9 @@ export default {
           filterStore.visible = false
         } else {
           const el = $xeTable.$refs.refElem as HTMLDivElement
+          const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
+          const filterOpts = $xeTable.computeFilterOpts
+          const { transfer } = filterOpts
           const tableRect = el.getBoundingClientRect()
           const btnElem = evnt.currentTarget as HTMLDivElement
           const { filters, filterMultiple, filterRender } = column
@@ -111,23 +114,37 @@ export default {
               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
-            let 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)
-            if (left < 1) {
-              left = 1
-            } else if (left > (el.clientWidth - filterWidth - 1)) {
-              left = el.clientWidth - filterWidth - 1
+            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

@@ -5,183 +5,218 @@ import { CreateElement } from 'vue'
 
 import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData } from '../../../../types'
 
-const { getI18n, getIcon, renderer } = VxeUI
+const { getI18n, getIcon, renderer, globalMixins } = VxeUI
+
+function renderOptions ($xeFilterPanel: any, h: CreateElement, filterRender: any, compConf: any) {
+  const props = $xeFilterPanel
+  const $xeTable = $xeFilterPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+  const tableInternalData = $xeTable as unknown as TableInternalData
+
+  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: $xeFilterPanel, $table: $xeTable })
+  const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
+  if (filterSlot) {
+    return [
+      h('div', {
+        class: 'vxe-table--filter-template',
+        style: maxHeight
+          ? {
+              maxHeight: `${maxHeight}px`
+            }
+          : {}
+      }, $xeTable.callSlot(filterSlot, params, h))
+    ]
+  } else if (rtFilter) {
+    return [
+      h('div', {
+        class: 'vxe-table--filter-template',
+        style: maxHeight
+          ? {
+              maxHeight: `${maxHeight}px`
+            }
+          : {}
+      }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
+    ]
+  }
+  const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item: any) => item._checked)
+  const isAllIndeterminate = multiple && filterStore.isIndeterminate
+  return [
+    h('ul', {
+      class: 'vxe-table--filter-header'
+    }, [
+      h('li', {
+        class: ['vxe-table--filter-option', {
+          'is--checked': isAllChecked,
+          'is--indeterminate': isAllIndeterminate
+        }],
+        attrs: {
+          title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+        },
+        on: {
+          click: (evnt: MouseEvent) => {
+            $xeFilterPanel.changeAllOption(evnt, !filterStore.isAllSelected)
+          }
+        }
+      }, (multiple
+        ? [
+            h('span', {
+              class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+            })
+          ]
+        : []).concat([
+        h('span', {
+          class: 'vxe-checkbox--label'
+        }, getI18n('vxe.table.allFilter'))
+      ]))
+    ]),
+    h('ul', {
+      class: 'vxe-table--filter-body',
+      style: maxHeight
+        ? {
+            maxHeight: `${maxHeight}px`
+          }
+        : {}
+    }, filterStore.options.map((item: any) => {
+      const isChecked = item._checked
+      const isIndeterminate = false
+      return h('li', {
+        class: ['vxe-table--filter-option', {
+          'is--checked': isChecked
+        }],
+        attrs: {
+          title: item.label
+        },
+        on: {
+          click: (evnt: MouseEvent) => {
+            $xeFilterPanel.changeOption(evnt, !item._checked, item)
+          }
+        }
+      }, (multiple
+        ? [
+            h('span', {
+              class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+            })
+          ]
+        : []).concat([
+        h('span', {
+          class: 'vxe-checkbox--label'
+        }, formatText(item.label, 1))
+      ]))
+    }))
+  ]
+}
+
+function renderFooter ($xeFilterPanel: any, h: CreateElement) {
+  const props = $xeFilterPanel
+  const $xeTable = $xeFilterPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+
+  const { filterStore } = props
+  const { column, multiple } = filterStore
+  const filterOpts = $xeTable.computeFilterOpts
+  const hasCheckOption = $xeFilterPanel.computeHasCheckOption
+  const filterRender = column.filterRender
+  const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+  const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate
+  return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
+    ? [
+        h('div', {
+          class: 'vxe-table--filter-footer'
+        }, [
+          h('button', {
+            class: {
+              'is--disabled': isDisabled
+            },
+            attrs: {
+              disabled: isDisabled
+            },
+            on: {
+              click: $xeFilterPanel.confirmFilter
+            }
+          }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
+          h('button', {
+            on: {
+              click: $xeFilterPanel.resetFilter
+            }
+          }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
+        ])
+      ]
+    : []
+}
 
 export default {
   name: 'VxeTableFilterPanel',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
   props: {
     filterStore: Object
   },
+  inject: {
+    $xeTable: {
+      default: null
+    }
+  },
   computed: {
-    hasCheckOption () {
+    computeHasCheckOption () {
       const { filterStore } = this
       return filterStore && filterStore.options.some((option: any) => option.checked)
     }
   } as any,
+  mounted (this: any) {
+    const $xeFilterPanel = this
+    const $xeTable = $xeFilterPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+    const filterOpts = $xeTable.computeFilterOpts
+    const { transfer } = filterOpts
+    const el = this.$refs.refElem as HTMLDivElement
+
+    if (transfer && el) {
+      document.body.appendChild(el)
+    }
+  },
+  beforeDestroy (this: any) {
+    const el = this.$refs.refElem as HTMLDivElement
+
+    if (el && el.parentNode) {
+      el.parentNode.removeChild(el)
+    }
+  },
   render (this: any, h: CreateElement) {
-    const $panel = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const $xeFilterPanel = this
+    const props = $xeFilterPanel
+    const $xeTable = $xeFilterPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
 
-    const { filterStore } = this
+    const { filterStore } = props
     const { visible, multiple, column } = filterStore
     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
+    const vSize = $xeFilterPanel.computeSize
     const filterOpts = $xeTable.computeFilterOpts
     const { destroyOnClose } = filterOpts
     return h('div', {
+      ref: 'refElem',
       class: [
         'vxe-table--filter-wrapper',
         'filter--prevent-default',
         compConf && compConf.className ? compConf.className : '',
         getClass(filterClassName, params),
         {
-          'is--animat': $xeTable.animat,
+          [`size--${vSize}`]: vSize,
+          'is--animat': tableProps.animat,
           'is--multiple': multiple,
           'is--active': visible
         }
       ],
       style: filterStore.style
-    }, filterStore.visible && (destroyOnClose ? visible : true) && column ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : [])
+    }, filterStore.visible && (destroyOnClose ? visible : true) && column ? renderOptions($xeFilterPanel, h, filterRender, compConf).concat(renderFooter($xeFilterPanel, h)) : [])
   },
   methods: {
-    renderOptions (h: CreateElement, filterRender: any, compConf: any) {
-      const $panel = this
-      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
-      const tableInternalData = $xeTable as unknown as TableInternalData
-
-      const { filterStore } = this
-      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 rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
-      if (filterSlot) {
-        return [
-          h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: `${maxHeight}px`
-                }
-              : {}
-          }, $xeTable.callSlot(filterSlot, params, h))
-        ]
-      } else if (rtFilter) {
-        return [
-          h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: `${maxHeight}px`
-                }
-              : {}
-          }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
-        ]
-      }
-      const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item: any) => item._checked)
-      const isAllIndeterminate = multiple && filterStore.isIndeterminate
-      return [
-        h('ul', {
-          class: 'vxe-table--filter-header'
-        }, [
-          h('li', {
-            class: ['vxe-table--filter-option', {
-              'is--checked': isAllChecked,
-              'is--indeterminate': isAllIndeterminate
-            }],
-            attrs: {
-              title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
-            },
-            on: {
-              click: (evnt: MouseEvent) => {
-                this.changeAllOption(evnt, !filterStore.isAllSelected)
-              }
-            }
-          }, (multiple
-            ? [
-                h('span', {
-                  class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                })
-              ]
-            : []).concat([
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, getI18n('vxe.table.allFilter'))
-          ]))
-        ]),
-        h('ul', {
-          class: 'vxe-table--filter-body',
-          style: maxHeight
-            ? {
-                maxHeight: `${maxHeight}px`
-              }
-            : {}
-        }, filterStore.options.map((item: any) => {
-          const isChecked = item._checked
-          const isIndeterminate = false
-          return h('li', {
-            class: ['vxe-table--filter-option', {
-              'is--checked': isChecked
-            }],
-            attrs: {
-              title: item.label
-            },
-            on: {
-              click: (evnt: MouseEvent) => {
-                this.changeOption(evnt, !item._checked, item)
-              }
-            }
-          }, (multiple
-            ? [
-                h('span', {
-                  class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                })
-              ]
-            : []).concat([
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, formatText(item.label, 1))
-          ]))
-        }))
-      ]
-    },
-    renderFooter (h: CreateElement) {
-      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
-
-      const { hasCheckOption, filterStore } = this
-      const { column, multiple } = filterStore
-      const filterOpts = $xeTable.computeFilterOpts
-      const filterRender = column.filterRender
-      const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
-      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate
-      return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
-        ? [
-            h('div', {
-              class: 'vxe-table--filter-footer'
-            }, [
-              h('button', {
-                class: {
-                  'is--disabled': isDisabled
-                },
-                attrs: {
-                  disabled: isDisabled
-                },
-                on: {
-                  click: this.confirmFilter
-                }
-              }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
-              h('button', {
-                on: {
-                  click: this.resetFilter
-                }
-              }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
-            ])
-          ]
-        : []
-    },
     // 全部筛选事件
     filterCheckAllEvent (evnt: any, value: any) {
       const filterStore = this.filterStore

package/packages/table/src/methods.ts

@@ -3014,7 +3014,12 @@ const Methods = {
       $xeTable.checkSelectionStatus()
       return new Promise<void>(resolve => {
         this.$nextTick()
-          .then(() => $xeTable.recalculate())
+          .then(() => handleRecalculateLayout($xeTable, false))
+          .then(() => {
+            calcCellHeight($xeTable)
+            updateRowOffsetTop($xeTable)
+            return handleRecalculateLayout($xeTable, false)
+          })
           .then(() => {
             let targetScrollLeft = lastScrollLeft
             let targetScrollTop = lastScrollTop
@@ -3028,8 +3033,7 @@ const Methods = {
               targetScrollTop = 0
             }
             reactData.isRowLoading = false
-            calcCellHeight($xeTable)
-            updateRowOffsetTop($xeTable)
+            handleRecalculateLayout($xeTable, false)
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -6654,6 +6658,10 @@ const Methods = {
     const currentColumnOpts = $xeTable.computeCurrentColumnOpts
     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)
@@ -6673,6 +6681,10 @@ const Methods = {
     const currentRowOpts = $xeTable.computeCurrentRowOpts
     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)
@@ -8441,10 +8453,10 @@ const Methods = {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { treeExpandLazyLoadedMaps } = internalData
+    const { treeExpandLazyLoadedMaps, treeEATime } = internalData
     const treeOpts = $xeTable.computeTreeOpts
     const { row, column } = params
-    const { lazy, trigger } = treeOpts
+    const { lazy, trigger, accordion } = treeOpts
     if (trigger === 'manual') {
       return
     }
@@ -8454,7 +8466,17 @@ const Methods = {
       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)
+        }
+      })
       $xeTable.dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt)
     }
   },
@@ -9225,7 +9247,8 @@ const Methods = {
       if (isScrollXBig && mouseOpts.area) {
         errLog('vxe.error.notProp', ['mouse-config.area'])
       }
-      $xeTable.$nextTick(() => {
+      calcScrollbar($xeTable)
+      return $xeTable.$nextTick(() => {
         updateStyle($xeTable)
       })
     }
@@ -9335,6 +9358,7 @@ const Methods = {
     if (isScrollYBig && mouseOpts.area) {
       errLog('vxe.error.notProp', ['mouse-config.area'])
     }
+    calcScrollbar($xeTable)
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable)
     })

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;
       }