vxe-table 3.15.27 → 3.15.29

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

@@ -4,7 +4,7 @@ import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
 import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
-import type { VxeTableConstructor, VxeTableDefines, TableReactData, TableInternalData } from '../../../../types'
+import type { VxeTableConstructor, VxeTableDefines, TableReactData, TableInternalData, VxeTablePrivateMethods } from '../../../../types'
 
 const { renderer } = VxeUI
 
@@ -41,6 +41,7 @@ export default {
       if (column && column.filters) {
         column.filters = toFilters(options || [])
         if (isUpdate) {
+          // 已废弃，即将去掉事件触发 new Event('click') -> null
           return $xeTable.handleColumnConfirmFilter(column, new Event('click'))
         }
       }
@@ -294,25 +295,37 @@ export default {
      * 当筛选面板中的重置按钮被按下时触发
      * @param {Event} evnt 事件
      */
-    handleFilterResetFilter (evnt: any) {
-      this.handleClearFilter(this.filterStore.column)
-      this.confirmFilterEvent(evnt)
+    handleFilterResetFilter (evnt: Event) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { filterStore } = reactData
+      $xeTable.handleClearFilter(filterStore.column)
+      $xeTable.confirmFilterEvent(evnt)
+      if (evnt) {
+        $xeTable.dispatchEvent('clear-filter', { filterList: [] }, evnt)
+      }
     },
     /**
      * 清空指定列的筛选条件
      * 如果为空则清空所有列的筛选条件
      * @param {String} fieldOrColumn 列
      */
-    _clearFilter (fieldOrColumn: any) {
-      const { filterStore } = this
+    _clearFilter (fieldOrColumn: string | VxeTableDefines.ColumnInfo<any> | null | undefined) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { filterStore } = reactData
+      const { tableFullColumn } = internalData
       let column
       if (fieldOrColumn) {
-        column = handleFieldOrColumn(this, fieldOrColumn)
+        column = handleFieldOrColumn($xeTable, fieldOrColumn)
         if (column) {
-          this.handleClearFilter(column)
+          $xeTable.handleClearFilter(column)
         }
       } else {
-        this.visibleColumn.forEach(this.handleClearFilter)
+        tableFullColumn.forEach($xeTable.handleClearFilter)
       }
       if (!fieldOrColumn || column !== filterStore.column) {
         Object.assign(filterStore, {
@@ -325,12 +338,14 @@ export default {
           visible: false
         })
       }
-      return this.updateData()
+      return $xeTable.updateData()
     },
-    _updateFilterOptionStatus (item: any, checked: any) {
+    _updateFilterOptionStatus (item: any, checked: boolean) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       item._checked = checked
       item.checked = checked
-      return this.$nextTick()
+      return $xeTable.$nextTick()
     }
   } as any
 }

package/packages/table/src/methods.ts

@@ -3,7 +3,7 @@ import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTarge
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import Cell from './cell'
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem } from './util'
+import { getRowUniqueId, clearTableAllStatus, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
@@ -30,8 +30,9 @@ function eqCellValue (row1: any, row2: any, field: any) {
   return XEUtils.isEqual(val1, val2)
 }
 
-function getNextSortOrder (_vm: any, column: any) {
-  const orders = _vm.sortOpts.orders
+function getNextSortOrder ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, column: any) {
+  const sortOpts = $xeTable.computeSortOpts
+  const { orders = [] } = sortOpts
   const currOrder = column.order || null
   const oIndex = orders.indexOf(currOrder) + 1
   return orders[oIndex < orders.length ? oIndex : 0]
@@ -2019,8 +2020,59 @@ function removeFooterMerges ($xeTable: VxeTableConstructor & VxeTablePrivateMeth
   return rest
 }
 
-function clearAllSort (_vm: any) {
-  _vm.tableFullColumn.forEach((column: any) => {
+function handleSortEvent ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: Event | null, sortConfs: VxeTableDefines.SortConfs | VxeTableDefines.SortConfs[], isUpdate?: boolean) {
+  const sortOpts = $xeTable.computeSortOpts
+  const { multiple, remote, orders } = sortOpts
+  if (!XEUtils.isArray(sortConfs)) {
+    sortConfs = [sortConfs]
+  }
+  if (sortConfs && sortConfs.length) {
+    if (!multiple) {
+      sortConfs = [sortConfs[0]]
+      clearAllSort($xeTable)
+    }
+    let firstColumn: any = null
+    sortConfs.forEach((confs: any, index: number) => {
+      let { field, order } = confs
+      let column = field
+      if (XEUtils.isString(field)) {
+        column = $xeTable.getColumnByField(field)
+      }
+      if (!firstColumn) {
+        firstColumn = column
+      }
+      if (column && column.sortable) {
+        if (orders && orders.indexOf(order) === -1) {
+          order = getNextSortOrder($xeTable, column)
+        }
+        if (column.order !== order) {
+          column.order = order
+        }
+        column.sortTime = Date.now() + index
+      }
+    })
+    if (isUpdate) {
+      if (!remote) {
+        $xeTable.handleTableData(true)
+      }
+    }
+    if (evnt) {
+      $xeTable.handleColumnSortEvent(evnt, firstColumn)
+    }
+    return $xeTable.$nextTick().then(() => {
+      updateRowOffsetTop($xeTable)
+      $xeTable.updateCellAreas()
+      return updateStyle($xeTable)
+    })
+  }
+  return $xeTable.$nextTick()
+}
+
+function clearAllSort ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { tableFullColumn } = internalData
+  tableFullColumn.forEach((column: any) => {
     column.order = null
   })
 }
@@ -3288,7 +3340,7 @@ function checkLastSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  const { scrollXLoad, scrollYLoad } = reactData
+  const { scrollXLoad, scrollYLoad, isAllOverflow } = reactData
   const { lcsTimeout } = internalData
   if (lcsTimeout) {
     clearTimeout(lcsTimeout)
@@ -3303,13 +3355,19 @@ function checkLastSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMet
     internalData.inBodyScroll = false
     internalData.inFooterScroll = false
     internalData.scrollRenderType = ''
-    calcCellHeight($xeTable)
+    if (!isAllOverflow) {
+      calcCellHeight($xeTable)
+      updateRowOffsetTop($xeTable)
+    }
     if (isRollX && scrollXLoad) {
       $xeTable.updateScrollXData()
     }
     if (isRollY && scrollYLoad) {
       $xeTable.updateScrollYData().then(() => {
-        calcCellHeight($xeTable)
+        if (!isAllOverflow) {
+          calcCellHeight($xeTable)
+          updateRowOffsetTop($xeTable)
+        }
         $xeTable.updateScrollYSpace()
       })
     }
@@ -4812,6 +4870,7 @@ const Methods = {
         }
         XEUtils.eachTree([targetColumn], (column) => {
           column.fixed = fixed
+          column.renderFixed = fixed
         })
         $xeTable.saveCustomStore('update:fixed')
         if (!status) {
@@ -4838,6 +4897,7 @@ const Methods = {
       if (targetColumn && targetColumn.fixed) {
         XEUtils.eachTree([targetColumn], (column) => {
           column.fixed = null
+          column.renderFixed = null
         })
         $xeTable.saveCustomStore('update:fixed')
         if (!status) {
@@ -6425,7 +6485,16 @@ const Methods = {
       }
     }
     if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
-      handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), tdEl.querySelector<HTMLElement>('.vxe-cell--label') || tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), params)
+      const ctEl = tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper')
+      let ovEl = null
+      let tipEl = tdEl.querySelector<HTMLElement>(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label')
+      if (column.treeNode) {
+        ovEl = tdEl.querySelector<HTMLElement>('.vxe-tree-cell')
+      }
+      if (!tipEl) {
+        tipEl = ctEl
+      }
+      handleTooltip($xeTable, evnt, tdEl, ovEl || ctEl, tipEl, params)
     }
   },
   /**
@@ -6440,10 +6509,19 @@ const Methods = {
     const tdEl = evnt.currentTarget as HTMLTableCellElement
     handleTargetEnterEvent($xeTable, tooltipStore.column !== column || !!tooltipStore.row)
     if (tooltipStore.column !== column || !tooltipStore.visible) {
-      handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), tdEl.querySelector<HTMLElement>('.vxe-cell--label') || tdEl.querySelector('.vxe-cell--wrapper') as HTMLElement, params)
+      const ctEl = tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper')
+      let ovEl = null
+      let tipEl = tdEl.querySelector<HTMLElement>(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label')
+      if (column.type === 'html') {
+        ovEl = tdEl.querySelector<HTMLElement>('.vxe-cell--html')
+      }
+      if (!tipEl) {
+        tipEl = ctEl
+      }
+      handleTooltip($xeTable, evnt, tdEl, ovEl || ctEl, tipEl, params)
     }
   },
-  openTooltip (target: any, content: any) {
+  openTooltip (target: HTMLElement, content: string | number) {
     const { $refs } = this
     const commTip = $refs.refCommTooltip
     if (commTip) {
@@ -7584,12 +7662,15 @@ const Methods = {
 
     const { mouseConfig } = props
     const mouseOpts = $xeTable.computeMouseOpts
-    const { field, sortable } = column
+    const { field, sortable, order } = column
     if (sortable) {
-      const params = { $table: $xeTable, $event: evnt, column, field, property: field, order: column.order, sortList: $xeTable.getSortColumns(), sortTime: column.sortTime }
+      const params = { $table: $xeTable, $event: evnt, column, field, property: field, order, sortList: $xeTable.getSortColumns(), sortTime: column.sortTime }
       if (mouseConfig && mouseOpts.area && $xeTable.handleSortEvent) {
         $xeTable.handleSortEvent(evnt, params)
       }
+      if (!order) {
+        $xeTable.dispatchEvent('clear-sort', params, evnt)
+      }
       $xeTable.dispatchEvent('sort-change', params, evnt)
     }
   },
@@ -8516,49 +8597,13 @@ const Methods = {
   setSort (sortConfs: VxeTableDefines.SortConfs | VxeTableDefines.SortConfs[], isUpdate?: boolean) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
-    const sortOpts = $xeTable.computeSortOpts
-    const { multiple, remote, orders } = sortOpts
-    if (!XEUtils.isArray(sortConfs)) {
-      sortConfs = [sortConfs]
-    }
-    if (sortConfs && sortConfs.length) {
-      if (!multiple) {
-        sortConfs = [sortConfs[0]]
-        clearAllSort($xeTable)
-      }
-      let firstColumn: any = null
-      sortConfs.forEach((confs: any, index: number) => {
-        let { field, order } = confs
-        let column = field
-        if (XEUtils.isString(field)) {
-          column = $xeTable.getColumnByField(field)
-        }
-        if (!firstColumn) {
-          firstColumn = column
-        }
-        if (column && column.sortable) {
-          if (orders && orders.indexOf(order) === -1) {
-            order = getNextSortOrder($xeTable, column)
-          }
-          if (column.order !== order) {
-            column.order = order
-          }
-          column.sortTime = Date.now() + index
-        }
-      })
-      if (isUpdate) {
-        if (!remote) {
-          $xeTable.handleTableData(true)
-        }
-        $xeTable.handleColumnSortEvent(new Event('click'), firstColumn)
-      }
-      return $xeTable.$nextTick().then(() => {
-        updateRowOffsetTop($xeTable)
-        $xeTable.updateCellAreas()
-        return updateStyle($xeTable)
-      })
-    }
-    return $xeTable.$nextTick()
+    // 已废弃，即将去掉事件触发 new Event('click') -> null
+    return handleSortEvent($xeTable, new Event('click'), sortConfs, isUpdate)
+  },
+  setSortByEvent (evnt: Event, sortConfs: VxeTableDefines.SortConfs | VxeTableDefines.SortConfs[], isUpdate?: boolean) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    return handleSortEvent($xeTable, evnt, sortConfs, isUpdate)
   },
   /**
    * 清空指定列的排序条件
@@ -8585,6 +8630,43 @@ const Methods = {
       return updateStyle($xeTable)
     })
   },
+  clearSortByEvent (evnt: Event, fieldOrColumn?: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any> | null) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { tableFullColumn } = internalData
+    const sortOpts = $xeTable.computeSortOpts
+    const sortCols: VxeTableDefines.ColumnInfo[] = []
+    let column: VxeTableDefines.ColumnInfo<any> | null = null
+    if (evnt) {
+      if (fieldOrColumn) {
+        column = handleFieldOrColumn($xeTable, fieldOrColumn)
+        if (column) {
+          column.order = null
+        }
+      } else {
+        tableFullColumn.forEach((column) => {
+          if (column.order) {
+            column.order = null
+            sortCols.push(column)
+          }
+        })
+      }
+      if (!sortOpts.remote) {
+        $xeTable.handleTableData(true)
+      }
+      if (sortCols.length) {
+        const params = { $table: $xeTable, $event: evnt, cols: sortCols, sortList: [] }
+        $xeTable.dispatchEvent('clear-all-sort', params, evnt)
+      } else if (column) {
+        $xeTable.handleColumnSortEvent(evnt, column)
+      }
+    }
+    return $xeTable.$nextTick().then(() => {
+      updateRowOffsetTop($xeTable)
+      return updateStyle($xeTable)
+    })
+  },
   // 在 v3 中废弃
   getSortColumn () {
     if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -8613,6 +8695,18 @@ const Methods = {
     }
     return sortList
   },
+  setFilterByEvent (evnt: Event, fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>, options: VxeColumnPropTypes.FilterItem[], isUpdate?: boolean) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+    if (column && column.filters) {
+      column.filters = toFilters(options || [])
+      if (isUpdate) {
+        return $xeTable.handleColumnConfirmFilter(column, evnt)
+      }
+    }
+    return $xeTable.$nextTick()
+  },
   /**
    * 关闭筛选
    * @param {Event} evnt 事件
@@ -8653,6 +8747,51 @@ const Methods = {
   isFilter (fieldOrColumn: any) {
     return this.isActiveFilterByColumn(fieldOrColumn)
   },
+  clearFilterByEvent (evnt: Event, fieldOrColumn?: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any> | null) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { filterStore } = reactData
+    const { tableFullColumn } = internalData
+    const filterOpts = $xeTable.computeFilterOpts
+    const filterCols: VxeTableDefines.ColumnInfo[] = []
+    let column: VxeTableDefines.ColumnInfo<any> | null = null
+    if (fieldOrColumn) {
+      column = handleFieldOrColumn($xeTable, fieldOrColumn)
+      if (column) {
+        $xeTable.handleClearFilter(column)
+      }
+    } else {
+      tableFullColumn.forEach(column => {
+        if (column.filters) {
+          filterCols.push(column)
+          $xeTable.handleClearFilter(column)
+        }
+      })
+    }
+    if (!fieldOrColumn || column !== filterStore.column) {
+      Object.assign(filterStore, {
+        isAllSelected: false,
+        isIndeterminate: false,
+        style: null,
+        options: [],
+        column: null,
+        multiple: false,
+        visible: false
+      })
+    }
+    if (!filterOpts.remote) {
+      $xeTable.updateData()
+    }
+    if (filterCols.length) {
+      const params = { $table: $xeTable, $event: evnt, cols: filterCols, filterList: [] }
+      $xeTable.dispatchEvent('clear-all-filter', params, evnt)
+    } else if (column) {
+      $xeTable.dispatchEvent('clear-filter', { filterList: () => $xeTable.getCheckedFilters() }, evnt)
+    }
+    return $xeTable.$nextTick()
+  },
   /**
    * 判断展开行是否懒加载完成
    * @param {Row} row 行对象
@@ -8665,7 +8804,7 @@ const Methods = {
     return rowRest && !!rowRest.expandLoaded
   },
   clearRowExpandLoaded (row: any) {
-    const $xeTable = this as VxeTableConstructor
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 

package/packages/table/src/table.ts

@@ -1794,6 +1794,7 @@ export default {
     const columnOpts = $xeTable.computeColumnOpts
     const rowOpts = $xeTable.computeRowOpts
     const customOpts = $xeTable.computeCustomOpts
+    const virtualYOpts = $xeTable.computeVirtualYOpts
 
     if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
       initTpImg()
@@ -1839,9 +1840,11 @@ export default {
       this.$resize = resizeObserver
     }
 
-    const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
-    if (tableViewportEl) {
-      tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, { passive: false })
+    if (virtualYOpts.mode !== 'scroll') {
+      const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
+      if (tableViewportEl) {
+        tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, { passive: false })
+      }
     }
 
     this.preventEvent(null, 'mounted')

package/styles/components/table.scss

@@ -1050,6 +1050,20 @@ $btnThemeList: (
       }
     }
   }
+  .vxe-header--column {
+    &.col--ellipsis {
+      &.col--center {
+        .vxe-cell--wrapper {
+          justify-content: center;
+        }
+      }
+      &.col--right {
+        .vxe-cell--wrapper {
+          justify-content: right;
+        }
+      }
+    }
+  }
   .vxe-header--column,
   .vxe-footer--column {
     &.col--ellipsis {