vxe-table 3.15.1 → 3.15.3

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/body.ts

@@ -89,7 +89,7 @@ function renderTdColumn (
   const tableInternalData = $xeTable as unknown as TableInternalData
   const $xeGrid = $xeTable.$xeGrid
 
-  const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
+  const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
   const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData
   const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore } = tableInternalData
   const cellOpts = $xeTable.computeCellOpts
@@ -97,6 +97,8 @@ function renderTdColumn (
   const checkboxOpts = $xeTable.computeCheckboxOpts
   const editOpts = $xeTable.computeEditOpts
   const tooltipOpts = $xeTable.computeTooltipOpts
+  const virtualXOpts = $xeTable.computeVirtualXOpts
+  const virtualYOpts = $xeTable.computeVirtualYOpts
   const { isAllColumnDrag, isAllRowDrag } = $xeTable.resizableOpts
   const rowOpts = $xeTable.computeRowOpts
   const rowDragOpts = $xeTable.computeRowDragOpts
@@ -268,9 +270,9 @@ function renderTdColumn (
   let isVNPreEmptyStatus = false
   if (!isMergeCell) {
     if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+      if (scrollYLoad && !treeConfig && !virtualYOpts.immediate && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
         isVNPreEmptyStatus = true
-      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+      } else if (scrollXLoad && !virtualXOpts.immediate && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
         isVNPreEmptyStatus = true
       }
     }

package/packages/table/src/footer.ts

@@ -23,8 +23,10 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
   const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
   const { scrollXLoad, scrollYLoad, overflowX, currentColumn } = tableReactData
   const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData
+  const virtualXOpts = $xeTable.computeVirtualXOpts
   const tooltipOpts = $xeTable.computeTooltipOpts
-  const { isAllColumnDrag } = $xeTable.resizableOpts
+  const resizableOpts = $xeTable.resizableOpts
+  const { isAllColumnDrag } = resizableOpts
   const columnOpts = $xeTable.computeColumnOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const cellOpts = $xeTable.computeCellOpts
@@ -134,7 +136,7 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
 
     let isVNPreEmptyStatus = false
     if (!isMergeCell) {
-      if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+      if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
         isVNPreEmptyStatus = true
       }
     }

package/packages/table/src/header.ts

@@ -22,6 +22,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
   const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
   const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData
   const { fullColumnIdData, scrollXStore } = tableInternalData
+  const virtualXOpts = $xeTable.computeVirtualXOpts
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
   const cellOpts = $xeTable.computeCellOpts
@@ -92,7 +93,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     let isVNPreEmptyStatus = false
     if (!isGroup) {
       if (!dragCol || dragCol.id !== colid) {
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+        if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
           isVNPreEmptyStatus = true
         }
       }