vxe-table 3.17.0-beta.8 → 3.17.0

package/packages/grid/src/grid.ts

@@ -31,9 +31,11 @@ function getTableOns (_vm: any) {
   if (proxyConfig) {
     if (proxyOpts.sort) {
       ons['sort-change'] = _vm.sortChangeEvent
+      ons['clear-all-sort'] = _vm.clearAllSortEvent
     }
     if (proxyOpts.filter) {
       ons['filter-change'] = _vm.filterChangeEvent
+      ons['clear-all-filter'] = _vm.clearAllFilterEvent
     }
   }
   return ons
@@ -309,6 +311,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const pagerOpts = $xeGrid.computePagerOpts as VxeGridPropTypes.PagerConfig
       return pagerOpts.total
     },
+    computePageCount () {
+      const $xeGrid = this
+      const reactData = ($xeGrid as any).reactData as GridReactData
+
+      const { tablePage } = reactData
+      return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1)
+    },
     computeIsLoading () {
       const $xeGrid = this
       const props = $xeGrid
@@ -391,7 +400,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             tablePage.pageSize = pageSize
           }
           if (total) {
-            tablePage.pageSize = total
+            tablePage.total = total
           }
         }
       }
@@ -972,7 +981,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if ($form) {
         return $form.validate()
       }
-      return $xeGrid.$nextTick()
+      return $xeGrid.$nextTick() as unknown as Promise<VxeFormDefines.ValidateErrorMapParams>
     },
     validateFormField (field: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[] | null) {
       const $xeGrid = this
@@ -981,7 +990,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if ($form) {
         return $form.validateField(field)
       }
-      return $xeGrid.$nextTick()
+      return $xeGrid.$nextTick() as unknown as Promise<VxeFormDefines.ValidateErrorMapParams>
     },
     clearFormValidate (field?: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[] | null) {
       const $xeGrid = this
@@ -994,31 +1003,70 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     homePage () {
       const $xeGrid = this
+      const reactData = $xeGrid.reactData
+
+      const { tablePage } = reactData
+      tablePage.currentPage = 1
+      return $xeGrid.$nextTick()
+    },
+    homePageByEvent (evnt: Event) {
+      const $xeGrid = this
 
       const $pager = $xeGrid.$refs.refPager as VxePagerInstance
       if ($pager) {
-        return $pager.homePage()
+        $pager.homePageByEvent(evnt)
       }
-      return $xeGrid.$nextTick()
     },
     endPage () {
       const $xeGrid = this
+      const reactData = $xeGrid.reactData
+
+      const { tablePage } = reactData
+      const pageCount = $xeGrid.computePageCount
+      tablePage.currentPage = pageCount
+      return $xeGrid.$nextTick()
+    },
+    endPageByEvent (evnt: Event) {
+      const $xeGrid = this
 
       const $pager = $xeGrid.$refs.refPager as VxePagerInstance
       if ($pager) {
-        return $pager.endPage()
+        $pager.endPageByEvent(evnt)
       }
+    },
+    setCurrentPage (currentPage: number | string | null | undefined) {
+      const $xeGrid = this
+      const reactData = $xeGrid.reactData
+
+      const { tablePage } = reactData
+      const pageCount = $xeGrid.computePageCount
+      tablePage.currentPage = Math.min(pageCount, Math.max(1, XEUtils.toNumber(currentPage)))
       return $xeGrid.$nextTick()
     },
-    jumpPage (currentPage: number | string | null | undefined) {
+    setCurrentPageByEvent (evnt: Event, currentPage: number | string | null | undefined) {
       const $xeGrid = this
 
       const $pager = $xeGrid.$refs.refPager as VxePagerInstance
       if ($pager) {
-        return $pager.jumpPage(currentPage)
+        $pager.setCurrentPageByEvent(evnt, currentPage)
       }
+    },
+    setPageSize (pageSize: number | string | null | undefined) {
+      const $xeGrid = this
+      const reactData = $xeGrid.reactData
+
+      const { tablePage } = reactData
+      tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize))
       return $xeGrid.$nextTick()
     },
+    setPageSizeByEvent (evnt: Event, pageSize: number | string | null | undefined) {
+      const $xeGrid = this
+
+      const $pager = $xeGrid.$refs.refPager as VxePagerInstance
+      if ($pager) {
+        $pager.setPageSizeByEvent(evnt, pageSize)
+      }
+    },
     triggerToolbarCommitEvent (params: any, evnt: any) {
       const $xeGrid = this
 
@@ -1041,7 +1089,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeGrid.triggerToolbarCommitEvent(tool, evnt)
       $xeGrid.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt)
     },
-    sortChangeEvent (params: VxeTableDefines.SortChangeEventParams) {
+    pageChangeEvent (params: VxePagerDefines.PageChangeEventParams) {
+      const $xeGrid = this
+      const props = $xeGrid
+      const reactData = $xeGrid.reactData
+
+      const { proxyConfig } = props
+      const { tablePage } = reactData
+      const { $event, currentPage, pageSize } = params
+      const proxyOpts = $xeGrid.computeProxyOpts
+      tablePage.currentPage = currentPage
+      tablePage.pageSize = pageSize
+      $xeGrid.dispatchEvent('page-change', params, $event)
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        $xeGrid.commitProxy('query').then((rest) => {
+          $xeGrid.dispatchEvent('proxy-query', rest, $event)
+        })
+      }
+    },
+    handleSortEvent (params: VxeTableDefines.SortChangeEventParams) {
       const $xeGrid = this
       const props = $xeGrid
       const reactData = $xeGrid.reactData
@@ -1060,27 +1126,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
           })
         }
       }
+    },
+    sortChangeEvent (params: VxeTableDefines.SortChangeEventParams) {
+      const $xeGrid = this
+
+      $xeGrid.handleSortEvent(params)
       $xeGrid.dispatchEvent('sort-change', params, params.$event)
     },
-    pageChangeEvent (params: VxePagerDefines.PageChangeEventParams) {
+    clearAllSortEvent (params: VxeTableDefines.SortChangeEventParams) {
       const $xeGrid = this
-      const props = $xeGrid
-      const reactData = $xeGrid.reactData
 
-      const { proxyConfig } = props
-      const { tablePage } = reactData
-      const { $event, currentPage, pageSize } = params
-      const proxyOpts = $xeGrid.computeProxyOpts
-      tablePage.currentPage = currentPage
-      tablePage.pageSize = pageSize
-      $xeGrid.dispatchEvent('page-change', params, $event)
-      if (proxyConfig && isEnableConf(proxyOpts)) {
-        $xeGrid.commitProxy('query').then((rest) => {
-          $xeGrid.dispatchEvent('proxy-query', rest, $event)
-        })
-      }
+      $xeGrid.handleSortEvent(params)
+      $xeGrid.dispatchEvent('clear-all-sort', params, params.$event)
     },
-    filterChangeEvent (params: VxeTableDefines.FilterChangeEventParams) {
+    handleFilterEvent (params: VxeTableDefines.ClearAllFilterEventParams) {
       const $xeGrid = this
       const props = $xeGrid
       const reactData = $xeGrid.reactData
@@ -1099,8 +1158,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
           })
         }
       }
+    },
+    filterChangeEvent (params: VxeTableDefines.ClearAllFilterEventParams) {
+      const $xeGrid = this
+
+      $xeGrid.handleFilterEvent(params)
       $xeGrid.dispatchEvent('filter-change', params, params.$event)
     },
+    clearAllFilterEvent (params: VxeTableDefines.ClearAllFilterEventParams) {
+      const $xeGrid = this
+
+      $xeGrid.handleFilterEvent(params)
+      $xeGrid.dispatchEvent('clear-all-filter', params, params.$event)
+    },
     submitFormEvent (params: VxeFormDefines.SubmitEventParams) {
       const $xeGrid = this
       const props = $xeGrid
@@ -1153,6 +1223,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeGrid.zoom()
       $xeGrid.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
     },
+    getParams () {
+      const $xeGrid = this
+      const props = $xeGrid
+
+      return (props as any).params
+    },
     zoom () {
       const $xeGrid = this
       const reactData = $xeGrid.reactData

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

@@ -1,4 +1,5 @@
 import XEUtils from 'xe-utils'
+import { getColumnList } from '../../src/util'
 
 import type { VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeGridConstructor, VxeTableDefines, GridPrivateMethods, TableReactData, TableInternalData } from '../../../../types'
 
@@ -96,21 +97,20 @@ export default {
         }
       })
       reactData.isCustomStatus = true
-      return $xeTable.saveCustomStore('confirm').then(() => {
-        if (allowGroup && allowValues && ($xeTable as any).handlePivotTableAggregateData) {
-          if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
-            // 更新数据分组
-            if (aggHandleFields.length) {
-              $xeTable.setRowGroups(aggHandleFields)
-            } else {
-              $xeTable.clearRowGroups()
-            }
+      if (allowGroup && allowValues && !!$xeTable.handlePivotTableAggregateData) {
+        if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
+          // 更新数据分组
+          if (aggHandleFields.length) {
+            $xeTable.setRowGroups(aggHandleFields)
           } else {
-            // 更新聚合函数
-            $xeTable.handleUpdateAggData()
+            $xeTable.clearRowGroups()
           }
+        } else if (allowValues) {
+          // 更新聚合函数
+          $xeTable.handleUpdateAggData()
         }
-      })
+      }
+      return $xeTable.saveCustomStore('confirm')
     },
     _cancelCustom () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -157,6 +157,7 @@ export default {
         sort: options === true,
         aggFunc: options === true
       }, options)
+      const allCols: VxeTableDefines.ColumnInfo[] = []
       XEUtils.eachTree(collectColumn, (column) => {
         if (opts.resizable) {
           column.resizeWidth = 0
@@ -166,6 +167,7 @@ export default {
         }
         if (opts.sort) {
           column.renderSortNumber = column.sortNumber
+          column.parentId = column.defaultParentId
         }
         if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
           column.visible = column.defaultVisible
@@ -175,9 +177,14 @@ export default {
           column.renderAggFn = column.defaultAggFunc
         }
         column.renderResizeWidth = column.renderWidth
+        allCols.push(column)
       })
+      if (opts.sort) {
+        const newCollectCols = XEUtils.toArrayTree(XEUtils.orderBy(allCols, 'renderSortNumber'), { key: 'id', parentKey: 'parentId', children: 'children' })
+        internalData.collectColumn = newCollectCols
+        internalData.tableFullColumn = getColumnList(newCollectCols)
+      }
       reactData.isCustomStatus = false
-      $xeTable.saveCustomStore('reset')
       return $xeTable.handleCustom().then(() => {
         if (opts.aggFunc && ($xeTable as any).handlePivotTableAggregateData) {
           const rowGroupFields = $xeTable.computeRowGroupFields
@@ -191,6 +198,7 @@ export default {
             $xeTable.handleUpdateAggData()
           }
         }
+        $xeTable.saveCustomStore('reset')
       })
     },
     _toggleCustomAllCheckbox () {

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

@@ -80,7 +80,7 @@ function insertTreeRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
       }
       parentChilds[funcName](item)
       mapChilds[funcName](item)
-      const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+      const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
       fullDataRowIdData[rowid] = rest
       fullAllDataRowIdData[rowid] = rest
     } else {
@@ -89,7 +89,7 @@ function insertTreeRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
       }
       afterFullData[funcName](item)
       tableFullTreeData[funcName](item)
-      const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+      const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
       fullDataRowIdData[rowid] = rest
       fullAllDataRowIdData[rowid] = rest
     }
@@ -129,7 +129,7 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
     } else {
       newRecords.forEach(item => {
         const rowid = getRowid($xeTable, item)
-        const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+        const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
         fullDataRowIdData[rowid] = rest
         fullAllDataRowIdData[rowid] = rest
         afterFullData.unshift(item)
@@ -158,7 +158,7 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
       } else {
         newRecords.forEach(item => {
           const rowid = getRowid($xeTable, item)
-          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
           fullDataRowIdData[rowid] = rest
           fullAllDataRowIdData[rowid] = rest
           afterFullData.push(item)
@@ -189,7 +189,7 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
               targetIndex = targetIndex + 1
             }
             parentMapChilds.splice(targetIndex, 0, item)
-            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
             fullDataRowIdData[rowid] = rest
             fullAllDataRowIdData[rowid] = rest
           })

package/packages/table/src/body.ts

@@ -267,7 +267,7 @@ function renderTdColumn (
     isDirty = $xeTable.isUpdateByRow(row, column.field)
   }
 
-  const isVNAutoHeight = scrollYLoad && !hasEllipsis
+  const isVNAutoHeight = !hasEllipsis && (scrollYLoad || scrollXLoad)
   let cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight)
 
   const isLastColumn = $columnIndex === columns.length - 1
@@ -307,7 +307,7 @@ function renderTdColumn (
     }
     tcStyle.width = `${column.renderWidth + mergeColWidth - cellOffsetWidth}px`
   }
-  if (scrollYLoad || hasEllipsis || isCsHeight || isRsHeight) {
+  if (scrollYLoad || scrollXLoad || hasEllipsis || isCsHeight || isRsHeight) {
     tcStyle.height = `${cellHeight}px`
   } else {
     tcStyle.minHeight = `${cellHeight}px`
@@ -502,14 +502,15 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
       }
     }
     if (rowRest) {
+      rowIndex = rowRest.index
+      _rowIndex = rowRest._index
       rowLevel = rowRest.level
+      seq = rowRest.seq
       if (hasRowGroupAggregate || (treeConfig && transform && seqMode === 'increasing')) {
         seq = rowRest._index + 1
-      } else {
-        seq = rowRest.seq
+      } else if ((treeConfig && seqMode === 'fixed')) {
+        seq = rowRest._tIndex + 1
       }
-      rowIndex = rowRest.index
-      _rowIndex = rowRest._index
     }
     const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
     // 行是否被展开

package/packages/table/src/cell.ts

@@ -395,7 +395,7 @@ export const Cell = {
       const { fullColumnFieldData } = tableInternalData
       const aggregateOpts = $table.computeAggregateOpts
       const { mode, showTotal, totalMethod, countFields, contentMethod, mapChildrenField } = aggregateOpts
-      const aggMethod = aggregateOpts.calcValuesMethod || aggregateOpts.countMethod || aggregateOpts.aggregateMethod
+      const aggCalcMethod = aggregateOpts.calcValuesMethod || aggregateOpts.countMethod || aggregateOpts.aggregateMethod
       const groupField = aggRow.groupField
       const groupContent = aggRow.groupContent
       const childList = mapChildrenField ? (aggRow[mapChildrenField] || []) : []
@@ -428,9 +428,9 @@ export const Cell = {
       } else if ($table.getPivotTableAggregateCellAggValue) {
         cellValue = $table.getPivotTableAggregateCellAggValue(params)
       } else if (aggFunc === true || (countFields && countFields.includes(field))) {
-        if (aggMethod) {
+        if (aggCalcMethod) {
           ctParams.aggValue = childCount
-          cellValue = `${aggMethod(ctParams)}`
+          cellValue = `${aggCalcMethod(ctParams)}`
         }
       }
     } else {
@@ -480,14 +480,14 @@ export const Cell = {
     const { rowGroupExpandedFlag } = tableReactData
     const { rowGroupExpandedMaps } = tableInternalData
     const aggregateOpts = $table.computeAggregateOpts
-    const { padding, indent } = aggregateOpts
+    const { mode, padding, indent } = aggregateOpts
     const rowid = getRowid($table, row)
     const isExpand = !!rowGroupExpandedFlag && !!rowGroupExpandedMaps[rowid]
     return h('div', {
       class: ['vxe-row-group--tree-node', {
         'is--expanded': isExpand
       }],
-      style: padding && indent
+      style: mode !== 'column' && padding && indent
         ? {
             paddingLeft: `${level * indent}px`
           }

package/packages/table/src/columnInfo.ts

@@ -127,15 +127,22 @@ export class ColumnInfo {
       parentId: null,
       visible,
       // 内部属性（一旦被使用，将导致不可升级版本）
+      defaultParentId: null,
       halfVisible: false,
       defaultVisible: visible,
       defaultFixed: _vm.fixed,
+
+      defaultAggGroup: _vm.aggGroup,
       defaultAggFunc: _vm.aggFunc,
+
       checked: false,
       halfChecked: false,
       disabled: false,
+      // 分组层级
       level: 1,
+      // 跨行
       rowSpan: 1,
+      // 跨列
       colSpan: 1,
 
       // 数据排序