vxe-table 4.13.26 → 4.13.28

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

@@ -52,6 +52,9 @@ hooks.add('tableFilterModule', {
       const { filterStore } = reactData
       $xeTable.handleClearFilter(filterStore.column)
       $xeTable.confirmFilterEvent(evnt)
+      if (evnt) {
+        $xeTable.dispatchEvent('clear-filter', { filterList: [] }, evnt)
+      }
     }
 
     const filterPrivateMethods: TableFilterPrivateMethods = {
@@ -272,6 +275,7 @@ hooks.add('tableFilterModule', {
         if (column && column.filters) {
           column.filters = toFilters(options || [])
           if (isUpdate) {
+            // 已废弃，即将去掉事件触发 new Event('click') -> null
             return $xeTable.handleColumnConfirmFilter(column, new Event('click'))
           }
         }
@@ -290,10 +294,10 @@ hooks.add('tableFilterModule', {
         if (fieldOrColumn) {
           column = handleFieldOrColumn($xeTable, fieldOrColumn)
           if (column) {
-            filterPrivateMethods.handleClearFilter(column)
+            $xeTable.handleClearFilter(column)
           }
         } else {
-          tableFullColumn.forEach(filterPrivateMethods.handleClearFilter)
+          tableFullColumn.forEach($xeTable.handleClearFilter)
         }
         if (!fieldOrColumn || column !== filterStore.column) {
           Object.assign(filterStore, {

package/packages/table/src/emits.ts

@@ -39,9 +39,11 @@ export default [
   'clear-merge',
   'sort-change',
   'clear-sort',
+  'clear-all-sort',
   'filter-change',
   'filter-visible',
   'clear-filter',
+  'clear-all-filter',
 
   'resizable-change', // 废弃
 

package/packages/table/src/table.ts

@@ -9,7 +9,7 @@ import TableHeaderComponent from './header'
 import TableFooterComponent from './footer'
 import tableProps from './props'
 import tableEmits from './emits'
-import { getRowUniqueId, clearTableAllStatus, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCellHeight } from './util'
+import { getRowUniqueId, clearTableAllStatus, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCellHeight } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 import TableCustomPanelComponent from '../module/custom/panel'
@@ -987,7 +987,7 @@ export default defineComponent({
 
     const getNextSortOrder = (column: VxeTableDefines.ColumnInfo) => {
       const sortOpts = computeSortOpts.value
-      const { orders } = sortOpts
+      const { orders = [] } = sortOpts
       const currOrder = column.order || null
       const oIndex = orders.indexOf(currOrder) + 1
       return orders[oIndex < orders.length ? oIndex : 0]
@@ -1399,6 +1399,54 @@ export default defineComponent({
       return rest
     }
 
+    const handleSortEvent = (evnt: Event | null, sortConfs: VxeTableDefines.SortConfs | VxeTableDefines.SortConfs[], isUpdate?: boolean) => {
+      const sortOpts = computeSortOpts.value
+      const { multiple, remote, orders } = sortOpts
+      if (!XEUtils.isArray(sortConfs)) {
+        sortConfs = [sortConfs]
+      }
+      if (sortConfs && sortConfs.length) {
+        if (!multiple) {
+          sortConfs = [sortConfs[0]]
+          clearAllSort()
+        }
+        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(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 nextTick().then(() => {
+          updateRowOffsetTop()
+          $xeTable.updateCellAreas()
+          return updateStyle()
+        })
+      }
+      return nextTick()
+    }
+
     const clearAllSort = () => {
       const { tableFullColumn } = internalData
       tableFullColumn.forEach((column) => {
@@ -5723,49 +5771,11 @@ export default defineComponent({
         return nextTick()
       },
       setSort (sortConfs, isUpdate) {
-        const sortOpts = computeSortOpts.value
-        const { multiple, remote, orders } = sortOpts
-        if (!XEUtils.isArray(sortConfs)) {
-          sortConfs = [sortConfs]
-        }
-        if (sortConfs && sortConfs.length) {
-          if (!multiple) {
-            sortConfs = [sortConfs[0]]
-            clearAllSort()
-          }
-          let firstColumn: any = null
-          sortConfs.forEach((confs: any, index: number) => {
-            let { field, order } = confs
-            let column = field
-            if (XEUtils.isString(field)) {
-              column = tableMethods.getColumnByField(field)
-            }
-            if (!firstColumn) {
-              firstColumn = column
-            }
-            if (column && column.sortable) {
-              if (orders && orders.indexOf(order) === -1) {
-                order = getNextSortOrder(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 nextTick().then(() => {
-            updateRowOffsetTop()
-            tableMethods.updateCellAreas()
-            return updateStyle()
-          })
-        }
-        return nextTick()
+        // 已废弃，即将去掉事件触发 new Event('click') -> null
+        return handleSortEvent(new Event('click'), sortConfs, isUpdate)
+      },
+      setSortByEvent (evnt, sortConfs, isUpdate) {
+        return handleSortEvent(evnt, sortConfs, isUpdate)
       },
       /**
        * 清空指定列的排序条件
@@ -5790,6 +5800,40 @@ export default defineComponent({
           return updateStyle()
         })
       },
+      clearSortByEvent (evnt, fieldOrColumn) {
+        const { tableFullColumn } = internalData
+        const sortOpts = computeSortOpts.value
+        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: [] }
+            dispatchEvent('clear-all-sort', params, evnt)
+          } else if (column) {
+            $xeTable.handleColumnSortEvent(evnt, column)
+          }
+        }
+        return nextTick().then(() => {
+          updateRowOffsetTop()
+          return updateStyle()
+        })
+      },
       isSort (fieldOrColumn) {
         if (fieldOrColumn) {
           const column = handleFieldOrColumn($xeTable, fieldOrColumn)
@@ -5813,6 +5857,16 @@ export default defineComponent({
         }
         return sortList
       },
+      setFilterByEvent (evnt, fieldOrColumn, options, isUpdate) {
+        const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+        if (column && column.filters) {
+          column.filters = toFilters(options || [])
+          if (isUpdate) {
+            return $xeTable.handleColumnConfirmFilter(column, evnt)
+          }
+        }
+        return nextTick()
+      },
       /**
        * 关闭筛选
        * @param {Event} evnt 事件
@@ -5849,6 +5903,47 @@ export default defineComponent({
       isFilter (fieldOrColumn) {
         return tableMethods.isActiveFilterByColumn(fieldOrColumn)
       },
+      clearFilterByEvent (evnt, fieldOrColumn) {
+        const { filterStore } = reactData
+        const { tableFullColumn } = internalData
+        const filterOpts = computeFilterOpts.value
+        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: [] }
+          dispatchEvent('clear-all-filter', params, evnt)
+        } else if (column) {
+          $xeTable.dispatchEvent('clear-filter', { filterList: () => $xeTable.getCheckedFilters() }, evnt)
+        }
+        return nextTick()
+      },
       /**
        * 判断展开行是否懒加载完成
        * @param {Row} row 行对象
@@ -8481,7 +8576,12 @@ export default defineComponent({
           }
         }
         if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
-          handleTooltip(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
+          if (column.treeNode) {
+            ovEl = tdEl.querySelector<HTMLElement>('.vxe-tree-cell')
+          }
+          handleTooltip(evnt, tdEl, ovEl || ctEl, tdEl.querySelector<HTMLElement>('.vxe-cell--label') || tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), params)
         }
       },
       /**
@@ -8905,12 +9005,15 @@ export default defineComponent({
       handleColumnSortEvent (evnt, column) {
         const { mouseConfig } = props
         const mouseOpts = computeMouseOpts.value
-        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: tableMethods.getSortColumns(), sortTime: column.sortTime }
+          const params = { $table: $xeTable, $event: evnt, column, field, property: field, order, sortList: tableMethods.getSortColumns(), sortTime: column.sortTime }
           if (mouseConfig && mouseOpts.area && $xeTable.handleSortEvent) {
             $xeTable.handleSortEvent(evnt, params)
           }
+          if (!order) {
+            dispatchEvent('clear-sort', params, evnt)
+          }
           dispatchEvent('sort-change', params, evnt)
         }
       },
@@ -8924,10 +9027,10 @@ export default defineComponent({
         if (sortable) {
           if (!order || column.order === order) {
             if (allowClear) {
-              tableMethods.clearSort(multiple ? column : null)
+              $xeTable.clearSort(multiple ? column : null)
             }
           } else {
-            tableMethods.sort({ field, order })
+            $xeTable.sort({ field, order })
           }
           $xeTable.handleColumnSortEvent(evnt, column)
         }
@@ -11282,6 +11385,7 @@ export default defineComponent({
       const rowOpts = computeRowOpts.value
       const customOpts = computeCustomOpts.value
       const rowGroupOpts = computeRowGroupOpts.value
+      const virtualYOpts = computeVirtualYOpts.value
       const { groupFields } = rowGroupOpts
 
       if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
@@ -11497,9 +11601,11 @@ export default defineComponent({
         }
       })
 
-      const tableViewportEl = refTableViewportElem.value
-      if (tableViewportEl) {
-        tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, { passive: false })
+      if (virtualYOpts.mode !== 'scroll') {
+        const tableViewportEl = refTableViewportElem.value
+        if (tableViewportEl) {
+          tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, { passive: false })
+        }
       }
 
       globalEvents.on($xeTable, 'paste', handleGlobalPasteEvent)

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 {