vxe-table 3.12.13 → 3.12.15

package/packages/table/src/methods.ts

@@ -7,7 +7,7 @@ import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible,
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, TableInternalData, VxeTablePrivateMethods, VxeTooltipInstance } from '../../../types'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, TableInternalData, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
@@ -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)
   },
   /**
@@ -6121,13 +6164,13 @@ const Methods = {
   /**
    * 点击排序事件
    */
-  triggerSortEvent (evnt: any, column: any, order: any) {
+  triggerSortEvent (evnt: Event, column: VxeTableDefines.ColumnInfo, order: VxeTablePropTypes.SortOrder) {
     const $xeTable = this
 
     const sortOpts = $xeTable.computeSortOpts
     const { multiple, allowClear } = sortOpts
-    const { field, sortable, remoteSort } = column
-    if (sortable || remoteSort) {
+    const { field, sortable } = column
+    if (sortable || (column as any).remoteSort) {
       if (!order || column.order === order) {
         if (allowClear) {
           $xeTable.clearSort(multiple ? column : null)
@@ -6138,6 +6181,38 @@ const Methods = {
       $xeTable.handleColumnSortEvent(evnt, column)
     }
   },
+  handleCellRuleUpdateStatus (type: 'change' | 'blur', cellParams: {
+    row: any
+    column: VxeTableDefines.ColumnInfo
+  }, cellValue?: any) {
+    const $xeTable = this
+    const reactData = $xeTable as unknown as TableReactData
+
+    const { validStore } = reactData
+    const { row, column } = cellParams
+    if ($xeTable.hasCellRules) {
+      if ($xeTable.hasCellRules(type, row, column)) {
+        const cell = $xeTable.getCellElement(row, column)
+        if (cell) {
+          const customVal = !XEUtils.isUndefined(cellValue)
+          return $xeTable.validCellRules(type, row, column, cellValue)
+            .then(() => {
+              if (customVal && validStore.visible) {
+                setCellValue(row, column, cellValue)
+              }
+              $xeTable.clearValidate(row, column)
+            })
+            .catch(({ rule }: any) => {
+              if (customVal) {
+                setCellValue(row, column, cellValue)
+              }
+              $xeTable.showValidTooltip({ rule, row, column, cell })
+            })
+        }
+      }
+    }
+    return $xeTable.$nextTick()
+  },
   /**
    * 表头单元格按下事件
    */
@@ -8485,33 +8560,13 @@ const Methods = {
    * 如果单元格配置了校验规则，则会进行校验
    */
   updateStatus (slotParams: any, cellValue: any) {
-    const customVal = !XEUtils.isUndefined(cellValue)
+    const $xeTable = this
+    const props = $xeTable
+
     return this.$nextTick().then(() => {
-      const { $refs, editRules, validStore } = this
-      const refTableBody = $refs.refTableBody
-      if (slotParams && refTableBody && editRules) {
-        const { row, column } = slotParams
-        const type = 'change'
-        if (this.hasCellRules) {
-          if (this.hasCellRules(type, row, column)) {
-            const cell = this.getCellElement(row, column)
-            if (cell) {
-              return this.validCellRules(type, row, column, cellValue)
-                .then(() => {
-                  if (customVal && validStore.visible) {
-                    setCellValue(row, column, cellValue)
-                  }
-                  this.clearValidate(row, column)
-                })
-                .catch(({ rule }: any) => {
-                  if (customVal) {
-                    setCellValue(row, column, cellValue)
-                  }
-                  this.showValidTooltip({ rule, row, column, cell })
-                })
-            }
-          }
-        }
+      const { editRules } = props
+      if (slotParams && editRules) {
+        return $xeTable.handleCellRuleUpdateStatus('change', slotParams, cellValue)
       }
     })
   },

package/packages/table/src/table.ts

@@ -516,7 +516,6 @@ export default {
           column: null
         },
         insertMaps: {},
-        removeList: [],
         removeMaps: {}
       },
       // 存放 tooltip 相关信息
@@ -575,6 +574,13 @@ export default {
         isFooter: false
       },
 
+      rowHeightStore: {
+        default: 48,
+        medium: 44,
+        small: 40,
+        mini: 36
+      },
+
       scrollVMLoading: false,
 
       calcCellHeightFlag: 0,
@@ -686,12 +692,10 @@ export default {
       return this.computeRowHeightMaps
     },
     computeRowHeightMaps () {
-      return {
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      }
+      const $xeTable = this
+      const reactData = $xeTable as TableReactData
+
+      return reactData.rowHeightStore
     },
     computeDefaultRowHeight () {
       const $xeTable = this
@@ -1435,11 +1439,30 @@ export default {
   mounted () {
     const $xeTable = this
     const props = $xeTable
+    const reactData = $xeTable
 
+    const { rowHeightStore } = reactData
+    const varEl = $xeTable.$refs.refVarElem
     const columnOpts = $xeTable.computeColumnOpts
     const rowOpts = $xeTable.computeRowOpts
     const customOpts = $xeTable.computeCustomOpts
 
+    if (varEl) {
+      const [defEl, mediumEl, smallEl, miniEl] = varEl.children
+      if (defEl) {
+        rowHeightStore.default = defEl.clientHeight
+      }
+      if (mediumEl) {
+        rowHeightStore.medium = mediumEl.clientHeight
+      }
+      if (smallEl) {
+        rowHeightStore.small = smallEl.clientHeight
+      }
+      if (miniEl) {
+        rowHeightStore.mini = miniEl.clientHeight
+      }
+    }
+
     if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
       initTpImg()
     }
@@ -1596,6 +1619,23 @@ export default {
         class: 'vxe-table-slots',
         ref: 'hideColumn'
       }, this.$slots.default),
+      h('div', {
+        ref: 'refVarElem',
+        class: 'vxe-table-vars'
+      }, [
+        h('div', {
+          class: 'vxe-table-var-default'
+        }),
+        h('div', {
+          class: 'vxe-table-var-medium'
+        }),
+        h('div', {
+          class: 'vxe-table-var-small'
+        }),
+        h('div', {
+          class: 'vxe-table-var-mini'
+        })
+      ]),
       h('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'

package/styles/components/table.scss

@@ -7,6 +7,27 @@
   display: none;
 }
 
+.vxe-table-vars {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+  .vxe-table-var-default {
+    height: var(--vxe-ui-table-row-height-default);
+  }
+  .vxe-table-var-medium {
+    height: var(--vxe-ui-table-row-height-medium);
+  }
+  .vxe-table-var-small {
+    height: var(--vxe-ui-table-row-height-small);
+  }
+  .vxe-table-var-mini {
+    height: var(--vxe-ui-table-row-height-mini);
+  }
+}
+
 .vxe-table--print-frame {
   position: fixed;
   bottom: -100%;
@@ -1234,6 +1255,9 @@
         }
       }
     }
+    .vxe-cell--valid-error-tip {
+      padding: 0 var(--vxe-ui-table-cell-padding-medium);
+    }
   }
   &.size--small {
     font-size: var(--vxe-ui-font-size-small);
@@ -1265,6 +1289,9 @@
         }
       }
     }
+    .vxe-cell--valid-error-tip {
+      padding: 0 var(--vxe-ui-table-cell-padding-small);
+    }
   }
   &.size--mini {
     font-size: var(--vxe-ui-font-size-mini);
@@ -1296,6 +1323,9 @@
         }
       }
     }
+    .vxe-cell--valid-error-tip {
+      padding: 0 var(--vxe-ui-table-cell-padding-mini);
+    }
   }
 
   .vxe-header--column,
@@ -1894,8 +1924,7 @@
       transform: translateX(-50%);
       text-align: left;
       z-index: 4;
-      padding-left: var(--vxe-ui-table-cell-padding-left);
-      padding-right: var(--vxe-ui-table-cell-padding-right);
+      padding: 0 var(--vxe-ui-table-cell-padding-default);
     }
     .vxe-cell--valid-error-wrapper {
       display: inline-block;