vxe-table 3.15.26 → 3.15.28

package/packages/table/src/methods.ts

@@ -4347,7 +4347,6 @@ const Methods = {
   },
   /**
    * 检查是否为临时行数据
-   * @param {Row} row 行对象
    */
   isInsertByRow (row: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -4367,19 +4366,16 @@ const Methods = {
   },
   /**
    * 删除所有新增的临时数据
-   * @returns
    */
   removeInsertRow () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
 
-    internalData.insertRowMaps = {}
-    return $xeTable.remove($xeTable.getInsertRecords())
+    const { insertRowMaps } = internalData
+    return $xeTable.remove(XEUtils.values(insertRowMaps))
   },
   /**
    * 检查行或列数据是否发生改变
-   * @param {Row} rowOrId 行对象
-   * @param {String} field 字段名
    */
   isUpdateByRow (rowOrId: any, field?: string | null) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -6429,7 +6425,12 @@ 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
+      if (column.treeNode) {
+        ovEl = tdEl.querySelector<HTMLElement>('.vxe-tree-cell')
+      }
+      handleTooltip($xeTable, evnt, tdEl, ovEl || ctEl, tdEl.querySelector<HTMLElement>('.vxe-cell--label') || tdEl.querySelector<HTMLElement>('.vxe-cell--wrapper'), params)
     }
   },
   /**
@@ -7588,12 +7589,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)
     }
   },
@@ -8589,6 +8593,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') {
@@ -8657,6 +8698,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 行对象
@@ -8669,7 +8755,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

@@ -2,7 +2,7 @@ import { CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { getFuncText, isEnableConf } from '../../ui/src/utils'
 import { initTpImg } from '../../ui/src/dom'
-import { createHandleGetRowId, getCellHeight } from './util'
+import { createHandleGetRowId, getCellHeight, hasDeepKey } from './util'
 import { VxeUI } from '../../ui'
 import methods from './methods'
 import TableBodyComponent from './body'
@@ -30,6 +30,14 @@ import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData, Ta
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
+function handleKeyField ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const keyField = $xeTable.computeRowField
+  internalData.currKeyField = keyField
+  internalData.isCurrDeepKey = hasDeepKey(keyField)
+}
+
 /**
  * 渲染浮固定列
  * 分别渲染左边固定列和右边固定列
@@ -730,6 +738,13 @@ export default {
       }
       return ''
     },
+    computeRowField () {
+      const $xeTable = this
+      const props = $xeTable
+
+      const rowOpts = $xeTable.computeRowOpts
+      return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`
+    },
     validOpts () {
       return this.computeValidOpts
     },
@@ -1202,12 +1217,12 @@ export default {
       return fixedSize
     },
     fixedColumnSize () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       return $xeTable.computeFixedColumnSize
     },
     computeIsMaxFixedColumn () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const fixedColumnSize = $xeTable.computeFixedColumnSize
       const columnOpts = $xeTable.columnOpts
@@ -1252,8 +1267,8 @@ export default {
       return false
     },
     computeVirtualScrollBars () {
-      const $xeTable = this
-      const reactData = $xeTable
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       const { overflowX, scrollXLoad, overflowY, scrollYLoad } = reactData
       return {
@@ -1333,7 +1348,7 @@ export default {
       this.reScrollFlag++
     },
     reScrollFlag () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       $xeTable.$nextTick(() => {
         $xeTable.recalculate(true).then(() => $xeTable.refreshScroll())
@@ -1365,7 +1380,7 @@ export default {
       this.footFlag++
     },
     footFlag () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       $xeTable.updateFooter()
     },
@@ -1395,6 +1410,21 @@ export default {
       const $xeTable = this
 
       $xeTable.handleUpdateRowGroup(val)
+    },
+    computeRowField () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      // 行主键被改变，重载表格
+      const { inited, tableFullData } = internalData
+      if (inited) {
+        handleKeyField($xeTable)
+        reactData.tableData = []
+        $xeTable.$nextTick(() => {
+          $xeTable.reloadData(tableFullData)
+        })
+      }
     }
   } as any,
   created () {
@@ -1404,6 +1434,8 @@ export default {
 
     Object.assign($xeTable, {
       tZindex: 0,
+      currKeyField: '',
+      isCurrDeepKey: false,
       elemStore: {},
       // 存放横向 X 虚拟滚动相关的信息
       scrollXStore: {
@@ -1514,6 +1546,8 @@ export default {
       swYTotal: 0
     })
 
+    handleKeyField($xeTable)
+
     const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props
     const { scrollXStore, scrollYStore } = internalData
     const columnOpts = $xeTable.computeColumnOpts
@@ -1760,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()
@@ -1805,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/packages/table/src/util.ts

@@ -97,39 +97,44 @@ export function getRowUniqueId () {
   return XEUtils.uniqueId('row_')
 }
 
+export function hasDeepKey (rowKey: string) {
+  return rowKey.indexOf('.') > -1
+}
+
 // 行主键 key
 export function getRowkey ($xeTable: VxeTableConstructor) {
-  const props = $xeTable
-  const rowOpts = $xeTable.computeRowOpts
-  return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`
+  const internalData = $xeTable as unknown as TableInternalData
+  const { currKeyField } = internalData
+  return currKeyField
 }
 
 // 行主键 value
 export function getRowid ($xeTable: VxeTableConstructor, row: any) {
-  const rowid = XEUtils.get(row, getRowkey($xeTable))
-  return encodeRowid(rowid)
+  const internalData = $xeTable as unknown as TableInternalData
+  const { isCurrDeepKey, currKeyField } = internalData
+  return row ? encodeRowid((isCurrDeepKey ? getDeepRowIdByKey : getFastRowIdByKey)(row, currKeyField)) : ''
 }
 
 export function createHandleUpdateRowId ($xeTable: VxeTableConstructor) {
-  const rowKey = getRowkey($xeTable)
-  const isDeepKey = rowKey.indexOf('.') > -1
-  const updateRId = isDeepKey ? updateDeepRowKey : updateFastRowKey
+  const internalData = $xeTable as unknown as TableInternalData
+  const { isCurrDeepKey, currKeyField } = internalData
+  const updateRId = isCurrDeepKey ? updateDeepRowKey : updateFastRowKey
   return {
-    rowKey,
+    rowKey: currKeyField,
     handleUpdateRowId (row: any) {
-      return row ? updateRId(row, rowKey) : null
+      return row ? updateRId(row, currKeyField) : ''
     }
   }
 }
 
 export function createHandleGetRowId ($xeTable: VxeTableConstructor) {
-  const rowKey = getRowkey($xeTable)
-  const isDeepKey = rowKey.indexOf('.') > -1
-  const getRId = isDeepKey ? getDeepRowIdByKey : getFastRowIdByKey
+  const internalData = $xeTable as unknown as TableInternalData
+  const { isCurrDeepKey, currKeyField } = internalData
+  const getRId = isCurrDeepKey ? getDeepRowIdByKey : getFastRowIdByKey
   return {
-    rowKey,
+    rowKey: currKeyField,
     handleGetRowId (row: any) {
-      return row ? getRId(row, rowKey) : null
+      return row ? encodeRowid(getRId(row, currKeyField)) : ''
     }
   }
 }
@@ -144,7 +149,7 @@ function getDeepRowIdByKey (row: any, rowKey: string) {
 }
 
 export function updateDeepRowKey (row: any, rowKey: string) {
-  let rowid = getDeepRowIdByKey(row, rowKey)
+  let rowid = encodeRowid(getDeepRowIdByKey(row, rowKey))
   if (eqEmptyValue(rowid)) {
     rowid = getRowUniqueId()
     XEUtils.set(row, rowKey, rowid)
@@ -157,7 +162,7 @@ function getFastRowIdByKey (row: any, rowKey: string) {
 }
 
 export function updateFastRowKey (row: any, rowKey: string) {
-  let rowid = getFastRowIdByKey(row, rowKey)
+  let rowid = encodeRowid(getFastRowIdByKey(row, rowKey))
   if (eqEmptyValue(rowid)) {
     rowid = getRowUniqueId()
     row[rowKey] = rowid
@@ -165,7 +170,7 @@ export function updateFastRowKey (row: any, rowKey: string) {
   return rowid
 }
 
-function getPaddingLeftRightSize (elem: any) {
+function getPaddingLeftRightSize (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const paddingLeft = XEUtils.toNumber(computedStyle.paddingLeft)
@@ -175,7 +180,7 @@ function getPaddingLeftRightSize (elem: any) {
   return 0
 }
 
-function getElementMarginAndWidth (elem: any) {
+function getElementMarginAndWidth (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const marginLeft = XEUtils.toNumber(computedStyle.marginLeft)