vxe-table 3.12.14 → 3.12.16

package/packages/table/src/methods.ts

@@ -1120,14 +1120,14 @@ const calcCellHeight = ($xeTable: VxeTableConstructor) => {
   }
 }
 
-function getOrderField (_vm: any, column: any) {
+function getOrderField ($xeTable: VxeTableConstructor, column: VxeTableDefines.ColumnInfo) {
   const { sortBy, sortType } = column
   return (row: any) => {
     let cellValue
     if (sortBy) {
       cellValue = XEUtils.isFunction(sortBy) ? sortBy({ row, column }) : XEUtils.get(row, sortBy)
     } else {
-      cellValue = _vm.getCellLabel(row, column)
+      cellValue = $xeTable.getCellLabel(row, column)
     }
     if (!sortType || sortType === 'auto') {
       return isNaN(cellValue) ? cellValue : XEUtils.toNumber(cellValue)
@@ -2968,74 +2968,148 @@ const Methods = {
    * 如果存在筛选条件，继续处理
    */
   updateAfterFullData () {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const props = $xeTable
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { tableFullColumn, tableFullData, filterOpts, sortOpts, treeConfig, treeOpts, tableFullTreeData } = this
+    const { treeConfig } = props
+    const { tableFullColumn, tableFullData, tableFullTreeData } = internalData
+    const filterOpts = $xeTable.computeFilterOpts
+    const sortOpts = $xeTable.computeSortOpts
+    const treeOpts = $xeTable.computeTreeOpts
+    const childrenField = treeOpts.children || treeOpts.childrenField
+    const { transform, rowField, parentField, mapChildrenField } = treeOpts
     const { remote: allRemoteFilter, filterMethod: allFilterMethod } = filterOpts
     const { remote: allRemoteSort, sortMethod: allSortMethod, multiple: sortMultiple, chronological } = sortOpts
-    const { transform } = treeOpts
-    const childrenField = treeOpts.children || treeOpts.childrenField
     let tableData: any[] = []
     let tableTree: any[] = []
-    const filterColumns: any[] = []
-    let orderColumns: any[] = []
-    tableFullColumn.forEach((column: any) => {
-      const { field, sortable, order, filters } = column
-      if (!allRemoteFilter && filters && filters.length) {
-        const valueList: any[] = []
-        const itemList: any[] = []
-        filters.forEach((item: any) => {
-          if (item.checked) {
-            itemList.push(item)
-            valueList.push(item.value)
+
+    // 处理数据
+    if (!allRemoteFilter || !allRemoteSort) {
+      const filterColumns: {
+        column: VxeTableDefines.ColumnInfo
+        valueList: any[]
+        itemList: VxeTableDefines.FilterOption[]
+      }[] = []
+      let orderColumns: VxeTableDefines.SortCheckedParams[] = []
+      tableFullColumn.forEach((column) => {
+        const { field, sortable, order, filters } = column
+        if (!allRemoteFilter && filters && filters.length) {
+          const valueList: any[] = []
+          const itemList: VxeTableDefines.FilterOption[] = []
+          filters.forEach((item) => {
+            if (item.checked) {
+              itemList.push(item as VxeTableDefines.FilterOption)
+              valueList.push(item.value)
+            }
+          })
+          if (itemList.length) {
+            filterColumns.push({ column, valueList, itemList })
           }
-        })
-        if (itemList.length) {
-          filterColumns.push({ column, valueList, itemList })
         }
+        if (!allRemoteSort && sortable && order) {
+          orderColumns.push({ column, field, property: field, order: order, sortTime: column.sortTime })
+        }
+      })
+      if (sortMultiple && chronological && orderColumns.length > 1) {
+        orderColumns = XEUtils.orderBy(orderColumns, 'sortTime')
       }
-      if (!allRemoteSort && sortable && order) {
-        orderColumns.push({ column, field, property: field, order, sortTime: column.sortTime })
-      }
-    })
-    if (sortMultiple && chronological && orderColumns.length > 1) {
-      orderColumns = XEUtils.orderBy(orderColumns, 'sortTime')
-    }
-    if (filterColumns.length) {
-      const handleFilter = (row: any) => {
-        return filterColumns.every(({ column, valueList, itemList }) => {
-          if (valueList.length && !allRemoteFilter) {
-            const { filterMethod, filterRender, field } = column
+
+      // 处理筛选
+      // 支持单列、多列、组合筛选
+      if (!allRemoteFilter && filterColumns.length) {
+        const handleFilter = (row: any) => {
+          return filterColumns.every(({ column, valueList, itemList }) => {
+            const { filterMethod, filterRender } = column
             const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
             const compFilterMethod = compConf ? (compConf.tableFilterMethod || compConf.filterMethod) : null
             const tdFilterMethod = compConf ? (compConf.tableFilterDefaultMethod || compConf.defaultTableFilterMethod || compConf.defaultFilterMethod) : null
             const cellValue = getCellValue(row, column)
             if (filterMethod) {
-              return itemList.some((item: any) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }))
+              return itemList.some((item) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xeTable }))
             } else if (compFilterMethod) {
-              return itemList.some((item: any) => compFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }))
+              return itemList.some((item) => compFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xeTable }))
             } else if (allFilterMethod) {
               return allFilterMethod({ options: itemList, values: valueList, cellValue, row, column })
             } else if (tdFilterMethod) {
-              return itemList.some((item: any) => tdFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: this }))
+              return itemList.some((item) => tdFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xeTable }))
             }
-            return valueList.indexOf(XEUtils.get(row, field)) > -1
-          }
-          return true
-        })
-      }
-      if (treeConfig && transform) {
-        // 筛选虚拟树
-        tableTree = XEUtils.searchTree(tableFullTreeData, handleFilter, {
-          original: true,
-          isEvery: true,
-          children: treeOpts.mapChildrenField,
-          mapChildren: childrenField
-        })
-        tableData = tableTree
+            return valueList.indexOf(XEUtils.get(row, column.field)) > -1
+          })
+        }
+        if (treeConfig && transform) {
+          // 筛选虚拟树
+          tableTree = XEUtils.searchTree(tableFullTreeData, handleFilter, {
+            original: true,
+            isEvery: true,
+            children: mapChildrenField,
+            mapChildren: childrenField
+          })
+          tableData = tableTree
+        } else {
+          tableData = treeConfig ? tableFullTreeData.filter(handleFilter) : tableFullData.filter(handleFilter)
+          tableTree = tableData
+        }
       } else {
-        tableData = treeConfig ? tableFullTreeData.filter(handleFilter) : tableFullData.filter(handleFilter)
-        tableTree = tableData
+        if (treeConfig && transform) {
+          // 还原虚拟树
+          tableTree = XEUtils.searchTree(tableFullTreeData, () => true, {
+            original: true,
+            isEvery: true,
+            children: mapChildrenField,
+            mapChildren: childrenField
+          })
+          tableData = tableTree
+        } else {
+          tableData = treeConfig ? tableFullTreeData.slice(0) : tableFullData.slice(0)
+          tableTree = tableData
+        }
+      }
+
+      // 处理排序（不能用于树形结构）
+      // 支持单列、多列、组合排序
+      if (!allRemoteSort && orderColumns.length) {
+        if (treeConfig && transform) {
+          // 虚拟树和列表一样，只能排序根级节点
+          if (allSortMethod) {
+            const sortRests = allSortMethod({ data: tableTree, sortList: orderColumns, $table: $xeTable })
+            tableTree = XEUtils.isArray(sortRests) ? sortRests : tableTree
+          } else {
+            const treeList = XEUtils.toTreeArray(tableTree, {
+              children: mapChildrenField
+            })
+            tableTree = XEUtils.toArrayTree(
+              XEUtils.orderBy(treeList, orderColumns.map(({ column, order }) => [getOrderField($xeTable, column), order])),
+              {
+                key: rowField,
+                parentKey: parentField,
+                children: childrenField,
+                mapChildren: mapChildrenField
+              }
+            )
+          }
+          tableData = tableTree
+        } else {
+          if (allSortMethod) {
+            const sortRests = allSortMethod({ data: tableData, sortList: orderColumns, $table: $xeTable })
+            tableData = XEUtils.isArray(sortRests) ? sortRests : tableData
+          } else {
+            // 兼容 v4
+            if (sortMultiple) {
+              tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField(this, column), order]))
+            } else {
+              const firstOrderColumn = orderColumns[0]
+              let sortByConfs
+              // 已废弃，兼容 v2，在 v4 中废弃， sortBy 不能为数组
+              if (XEUtils.isArray((firstOrderColumn as any).sortBy)) {
+                sortByConfs = (firstOrderColumn as any).sortBy.map((item: any) => [item, firstOrderColumn.order])
+              }
+              tableData = XEUtils.orderBy(tableData, sortByConfs || [firstOrderColumn].map(({ column, order }) => [getOrderField(this, column), order]))
+            }
+            tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField($xeTable, column), order]))
+          }
+          tableTree = tableData
+        }
       }
     } else {
       if (treeConfig && transform) {
@@ -3052,39 +3126,8 @@ const Methods = {
         tableTree = tableData
       }
     }
-    const firstOrderColumn = orderColumns[0]
-    if (!allRemoteSort && firstOrderColumn) {
-      if (treeConfig && transform) {
-        // 虚拟树和列表一样，只能排序根级节点
-        if (allSortMethod) {
-          const sortRests = allSortMethod({ data: tableTree, sortList: orderColumns, $table: this })
-          tableTree = XEUtils.isArray(sortRests) ? sortRests : tableTree
-        } else {
-          tableTree = XEUtils.orderBy(tableTree, orderColumns.map(({ column, order }) => [getOrderField(this, column), order]))
-        }
-        tableData = tableTree
-      } else {
-        if (allSortMethod) {
-          const sortRests = allSortMethod({ data: tableData, column: firstOrderColumn.column, property: firstOrderColumn.field, field: firstOrderColumn.field, order: firstOrderColumn.order, sortList: orderColumns, $table: this })
-          tableData = XEUtils.isArray(sortRests) ? sortRests : tableData
-        } else {
-          // 兼容 v4
-          if (sortMultiple) {
-            tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField(this, column), order]))
-          } else {
-            // 兼容 v2，在 v4 中废弃， sortBy 不能为数组
-            let sortByConfs
-            if (XEUtils.isArray(firstOrderColumn.sortBy)) {
-              sortByConfs = firstOrderColumn.sortBy.map((item: any) => [item, firstOrderColumn.order])
-            }
-            tableData = XEUtils.orderBy(tableData, sortByConfs || [firstOrderColumn].map(({ column, order }) => [getOrderField(this, column), order]))
-          }
-        }
-        tableTree = tableData
-      }
-    }
-    this.afterFullData = tableData
-    this.afterTreeFullData = tableTree
+    internalData.afterFullData = tableData
+    internalData.afterTreeFullData = tableTree
     updateAfterDataIndex($xeTable)
   },
   /**
@@ -6924,6 +6967,19 @@ const Methods = {
     reactData.pendingRowMaps = pendingMaps
     return $xeTable.$nextTick()
   },
+  hasPendingByRow (row: any) {
+    const $xeTable = this
+
+    return $xeTable.isPendingByRow(row)
+  },
+  isPendingByRow (row: any) {
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { pendingRowMaps } = reactData
+    const rowid = getRowid($xeTable, row)
+    return !!pendingRowMaps[rowid]
+  },
   getPendingRecords () {
     const $xeTable = this
     const reactData = $xeTable
@@ -6939,11 +6995,6 @@ const Methods = {
     })
     return insertRecords
   },
-  hasPendingByRow (row: any) {
-    const { pendingRowMaps } = this
-    const rowid = getRowid(this, row)
-    return !!pendingRowMaps[rowid]
-  },
   clearPendingRow () {
     this.pendingRowMaps = {}
     return this.$nextTick()
@@ -7911,8 +7962,10 @@ const Methods = {
   },
   triggerBodyScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
+    const { scrollYLoad, scrollXLoad } = reactData
     const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
@@ -7967,13 +8020,17 @@ const Methods = {
         setScrollTop(rightScrollElem, scrollTop)
       }
       setScrollTop(yHandleEl, scrollTop)
-      $xeTable.triggerScrollYEvent(evnt)
+      if (scrollYLoad) {
+        $xeTable.triggerScrollYEvent(evnt)
+      }
     }
     if (isRollX) {
       setScrollLeft(xHandleEl, scrollLeft)
       setScrollLeft(headerScrollElem, scrollLeft)
       setScrollLeft(footerScrollElem, scrollLeft)
-      $xeTable.triggerScrollXEvent(evnt)
+      if (scrollXLoad) {
+        $xeTable.triggerScrollXEvent(evnt)
+      }
     }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'body',
@@ -7982,8 +8039,10 @@ const Methods = {
   },
   triggerHeaderScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
+    const { scrollXLoad } = reactData
     const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
@@ -8013,7 +8072,9 @@ const Methods = {
     setScrollLeft(xHandleEl, scrollLeft)
     setScrollLeft(footerScrollElem, scrollLeft)
     setScrollLeft(bodyScrollElem, scrollLeft)
-    $xeTable.triggerScrollXEvent(evnt)
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt)
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'header',
       fixed: fixedType
@@ -8021,8 +8082,10 @@ const Methods = {
   },
   triggerFooterScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
+    const { scrollXLoad } = reactData
     const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
@@ -8052,7 +8115,9 @@ const Methods = {
     setScrollLeft(xHandleEl, scrollLeft)
     setScrollLeft(headerScrollElem, scrollLeft)
     setScrollLeft(bodyScrollElem, scrollLeft)
-    $xeTable.triggerScrollXEvent(evnt)
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt)
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'footer',
       fixed: fixedType
@@ -8069,6 +8134,7 @@ const Methods = {
       return
     }
     const { highlightHoverRow } = tableProps
+    const { scrollYLoad } = reactData
     const { elemStore, lastScrollTop, lastScrollLeft } = internalData
     const rowOpts = $xeTable.computeRowOpts
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
@@ -8117,7 +8183,9 @@ const Methods = {
         setScrollTop(bodyScrollElem, currTopNum)
         setScrollTop(leftScrollElem, currTopNum)
         setScrollTop(rightScrollElem, currTopNum)
-        $xeTable.triggerScrollYEvent(evnt)
+        if (scrollYLoad) {
+          $xeTable.triggerScrollYEvent(evnt)
+        }
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
           type: 'table',
           fixed: ''
@@ -8139,8 +8207,10 @@ const Methods = {
   },
   triggerVirtualScrollXEvent (evnt: Event) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
+    const { scrollXLoad } = reactData
     const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
     if (inHeaderScroll || inBodyScroll || inFooterScroll) {
       return
@@ -8166,7 +8236,9 @@ const Methods = {
     setScrollLeft(bodyScrollElem, scrollLeft)
     setScrollLeft(headerScrollElem, scrollLeft)
     setScrollLeft(footerScrollElem, scrollLeft)
-    $xeTable.triggerScrollXEvent(evnt)
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt)
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
@@ -8174,8 +8246,10 @@ const Methods = {
   },
   triggerVirtualScrollYEvent (evnt: Event) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
+    const { scrollYLoad } = reactData
     const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
     if (inHeaderScroll || inBodyScroll || inFooterScroll) {
       return
@@ -8201,7 +8275,9 @@ const Methods = {
     setScrollTop(bodyScrollElem, scrollTop)
     setScrollTop(leftScrollElem, scrollTop)
     setScrollTop(rightScrollElem, scrollTop)
-    $xeTable.triggerScrollYEvent(evnt)
+    if (scrollYLoad) {
+      $xeTable.triggerScrollYEvent(evnt)
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''

package/packages/table/src/table.ts

@@ -516,7 +516,6 @@ export default {
           column: null
         },
         insertMaps: {},
-        removeList: [],
         removeMaps: {}
       },
       // 存放 tooltip 相关信息