vxe-table 3.15.1 → 3.15.3

package/packages/table/src/methods.ts

@@ -205,7 +205,7 @@ function restoreCustomStorage ($xeTable: VxeTableConstructor & VxeTablePrivateMe
  * 更新数据列的 Map
  * 牺牲数据组装的耗时，用来换取使用过程中的流畅
  */
-function cacheColumnMap ($xeTable: VxeTableConstructor) {
+function cacheColumnMap ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
@@ -315,7 +315,7 @@ function cacheColumnMap ($xeTable: VxeTableConstructor) {
   reactData.isAllOverflow = isAllOverflow
 }
 
-const updateScrollYStatus = ($xeTable: VxeTableConstructor, fullData?: any[]) => {
+const updateScrollYStatus = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, fullData?: any[]) => {
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
@@ -331,7 +331,97 @@ const updateScrollYStatus = ($xeTable: VxeTableConstructor, fullData?: any[]) =>
   return scrollYLoad
 }
 
-function updateAfterListIndex ($xeTable: VxeTableConstructor) {
+/**
+ * 展开与收起树节点
+ * @param rows
+ * @param expanded
+ * @returns
+ */
+function handleBaseTreeExpand ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, rows: any[], expanded: boolean) {
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { treeNodeColumn } = reactData
+  const { fullAllDataRowIdData, tableFullData, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData
+  const treeOpts = $xeTable.computeTreeOpts
+  const { reserve, lazy, accordion, toggleMethod } = treeOpts
+  const childrenField = treeOpts.children || treeOpts.childrenField
+  const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
+  const result: any[] = []
+  const columnIndex = $xeTable.getColumnIndex(treeNodeColumn)
+  const $columnIndex = $xeTable.getVMColumnIndex(treeNodeColumn)
+  const { handleGetRowId } = createHandleGetRowId($xeTable)
+  let validRows = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: treeNodeColumn, columnIndex, $columnIndex, row })) : rows
+  if (accordion) {
+    validRows = validRows.length ? [validRows[validRows.length - 1]] : []
+    // 同一级只能展开一个
+    const matchObj = XEUtils.findTree(tableFullData, item => item === validRows[0], { children: childrenField })
+    if (matchObj) {
+      matchObj.items.forEach(item => {
+        const rowid = handleGetRowId(item)
+        if (treeExpandedMaps[rowid]) {
+          delete treeExpandedMaps[rowid]
+        }
+      })
+    }
+  }
+  if (expanded) {
+    validRows.forEach((row: any) => {
+      const rowid = handleGetRowId(row)
+      if (!treeExpandedMaps[rowid]) {
+        const rowRest = fullAllDataRowIdData[rowid]
+        if (rowRest) {
+          const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid]
+          // 是否使用懒加载
+          if (isLoad) {
+            result.push(handleAsyncTreeExpandChilds($xeTable, row))
+          } else {
+            if (row[childrenField] && row[childrenField].length) {
+              treeExpandedMaps[rowid] = row
+            }
+          }
+        }
+      }
+    })
+  } else {
+    validRows.forEach(item => {
+      const rowid = handleGetRowId(item)
+      if (treeExpandedMaps[rowid]) {
+        delete treeExpandedMaps[rowid]
+      }
+    })
+  }
+  if (reserve) {
+    validRows.forEach((row: any) => handleTreeExpandReserve($xeTable, row, expanded))
+  }
+  reactData.treeExpandedFlag++
+  return Promise.all(result).then(() => {
+    return $xeTable.recalculate()
+  })
+}
+
+/**
+ * 虚拟树的展开与收起
+ * @param rows
+ * @param expanded
+ * @returns
+ */
+function handleVirtualTreeExpand ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, rows: any[], expanded: boolean) {
+  return handleBaseTreeExpand($xeTable, rows, expanded).then(() => {
+    handleVirtualTreeToList($xeTable)
+    $xeTable.handleTableData()
+    updateAfterDataIndex($xeTable)
+    return $xeTable.$nextTick()
+  }).then(() => {
+    return $xeTable.recalculate(true)
+  }).then(() => {
+    setTimeout(() => {
+      $xeTable.updateCellAreas()
+    }, 30)
+  })
+}
+
+function updateAfterListIndex ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const props = $xeTable
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -362,7 +452,7 @@ function updateAfterListIndex ($xeTable: VxeTableConstructor) {
  * 预编译
  * 对渲染中的数据提前解析序号及索引。牺牲提前编译耗时换取渲染中额外损耗，使运行时更加流畅
  */
-function updateAfterDataIndex ($xeTable: VxeTableConstructor) {
+function updateAfterDataIndex ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const props = $xeTable
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -399,7 +489,7 @@ function updateAfterDataIndex ($xeTable: VxeTableConstructor) {
  * 如果为虚拟树，将树结构拍平
  * @returns
  */
-function handleVirtualTreeToList ($xeTable: VxeTableConstructor) {
+function handleVirtualTreeToList ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const props = $xeTable
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -3014,7 +3104,12 @@ const Methods = {
       $xeTable.checkSelectionStatus()
       return new Promise<void>(resolve => {
         this.$nextTick()
-          .then(() => $xeTable.recalculate())
+          .then(() => handleRecalculateLayout($xeTable, false))
+          .then(() => {
+            calcCellHeight($xeTable)
+            updateRowOffsetTop($xeTable)
+            return handleRecalculateLayout($xeTable, false)
+          })
           .then(() => {
             let targetScrollLeft = lastScrollLeft
             let targetScrollTop = lastScrollTop
@@ -3028,8 +3123,7 @@ const Methods = {
               targetScrollTop = 0
             }
             reactData.isRowLoading = false
-            calcCellHeight($xeTable)
-            updateRowOffsetTop($xeTable)
+            handleRecalculateLayout($xeTable, false)
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -6654,6 +6748,10 @@ const Methods = {
     const currentColumnOpts = $xeTable.computeCurrentColumnOpts
     const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod as any
     const { column: newValue } = params
+    const { trigger } = currentColumnOpts
+    if (trigger === 'manual') {
+      return
+    }
     const isChange = oldValue !== newValue
     if (!beforeRowMethod || beforeRowMethod({ column: newValue, $table: $xeTable })) {
       $xeTable.setCurrentColumn(newValue)
@@ -6673,6 +6771,10 @@ const Methods = {
     const currentRowOpts = $xeTable.computeCurrentRowOpts
     const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod as any
     const { row: newValue } = params
+    const { trigger } = currentRowOpts
+    if (trigger === 'manual') {
+      return
+    }
     const isChange = oldValue !== newValue
     if (!beforeRowMethod || beforeRowMethod({ row: newValue, $table: $xeTable })) {
       $xeTable.setCurrentRow(newValue)
@@ -8226,7 +8328,7 @@ const Methods = {
         internalData.rowExpandedMaps = rowExpandedMaps
         rows = rows.slice(rows.length - 1, rows.length)
       }
-      const validRows: any[] = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: this.getRowIndex(row), $rowIndex: this.getVMRowIndex(row) })) : rows
+      const validRows: any[] = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: $xeTable.getRowIndex(row), $rowIndex: $xeTable.getVMRowIndex(row) })) : rows
       if (expanded) {
         validRows.forEach((row: any) => {
           const rowid = handleGetRowId(row)
@@ -8241,7 +8343,7 @@ const Methods = {
           }
         })
       } else {
-        validRows.forEach((item) => {
+        validRows.forEach(item => {
           const rowid = handleGetRowId(item)
           if (rowExpandedMaps[rowid]) {
             delete rowExpandedMaps[rowid]
@@ -8441,10 +8543,10 @@ const Methods = {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { treeExpandLazyLoadedMaps } = internalData
+    const { treeExpandLazyLoadedMaps, treeEATime } = internalData
     const treeOpts = $xeTable.computeTreeOpts
     const { row, column } = params
-    const { lazy, trigger } = treeOpts
+    const { lazy, trigger, accordion } = treeOpts
     if (trigger === 'manual') {
       return
     }
@@ -8454,7 +8556,17 @@ const Methods = {
       const expanded = !$xeTable.isTreeExpandByRow(row)
       const columnIndex = $xeTable.getColumnIndex(column)
       const $columnIndex = $xeTable.getVMColumnIndex(column)
-      $xeTable.setTreeExpand(row, expanded)
+      if (treeEATime) {
+        clearTimeout(treeEATime)
+      }
+      $xeTable.setTreeExpand(row, expanded).then(() => {
+        if (accordion) {
+          internalData.treeEATime = setTimeout(() => {
+            internalData.treeEATime = undefined
+            $xeTable.scrollToRow(row)
+          }, 30)
+        }
+      })
       $xeTable.dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt)
     }
   },
@@ -8481,96 +8593,6 @@ const Methods = {
     }, { children: childrenField })
     return this.setTreeExpand(expandeds, expanded)
   },
-  /**
-   * 默认，展开与收起树节点
-   * @param rows
-   * @param expanded
-   * @returns
-   */
-  handleBaseTreeExpand (rows: any, expanded: any) {
-    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const { treeNodeColumn } = reactData
-    const { fullAllDataRowIdData, tableFullData, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData
-    const treeOpts = $xeTable.computeTreeOpts
-    const { reserve, lazy, accordion, toggleMethod } = treeOpts
-    const childrenField = treeOpts.children || treeOpts.childrenField
-    const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
-    const result: any[] = []
-    const columnIndex = $xeTable.getColumnIndex(treeNodeColumn)
-    const $columnIndex = $xeTable.getVMColumnIndex(treeNodeColumn)
-    const { handleGetRowId } = createHandleGetRowId($xeTable)
-    let validRows = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: treeNodeColumn, columnIndex, $columnIndex, row })) : rows
-    if (accordion) {
-      validRows = validRows.length ? [validRows[validRows.length - 1]] : []
-      // 同一级只能展开一个
-      const matchObj = XEUtils.findTree(tableFullData, item => item === validRows[0], { children: childrenField })
-      if (matchObj) {
-        matchObj.items.forEach(item => {
-          const rowid = handleGetRowId(item)
-          if (treeExpandedMaps[rowid]) {
-            delete treeExpandedMaps[rowid]
-          }
-        })
-      }
-    }
-    if (expanded) {
-      validRows.forEach((row: any) => {
-        const rowid = handleGetRowId(row)
-        if (!treeExpandedMaps[rowid]) {
-          const rowRest = fullAllDataRowIdData[rowid]
-          if (rowRest) {
-            const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid]
-            // 是否使用懒加载
-            if (isLoad) {
-              result.push(handleAsyncTreeExpandChilds($xeTable, row))
-            } else {
-              if (row[childrenField] && row[childrenField].length) {
-                treeExpandedMaps[rowid] = row
-              }
-            }
-          }
-        }
-      })
-    } else {
-      validRows.forEach((item: any) => {
-        const rowid = handleGetRowId(item)
-        if (treeExpandedMaps[rowid]) {
-          delete treeExpandedMaps[rowid]
-        }
-      })
-    }
-    if (reserve) {
-      validRows.forEach((row: any) => handleTreeExpandReserve($xeTable, row, expanded))
-    }
-    reactData.treeExpandedFlag++
-    return Promise.all(result).then(() => {
-      return $xeTable.recalculate()
-    })
-  },
-  /**
-   * 虚拟树的展开与收起
-   * @param rows
-   * @param expanded
-   * @returns
-   */
-  handleVirtualTreeExpand (rows: any[], expanded: boolean) {
-    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-
-    return this.handleBaseTreeExpand(rows, expanded).then(() => {
-      handleVirtualTreeToList($xeTable)
-      this.handleTableData()
-      updateAfterDataIndex($xeTable)
-    }).then(() => {
-      return this.recalculate()
-    }).then(() => {
-      setTimeout(() => {
-        this.updateCellAreas()
-      }, 30)
-    })
-  },
   /**
    * 设置展开树形节点，二个参数设置这一行展开与否
    * 支持单行
@@ -8579,6 +8601,8 @@ const Methods = {
    * @param {Boolean} expanded 是否展开
    */
   setTreeExpand (rows: any | any[], expanded: boolean) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
     const { treeOpts } = this
     const { transform } = treeOpts
     if (rows) {
@@ -8588,9 +8612,9 @@ const Methods = {
       if (rows.length) {
         // 如果为虚拟树
         if (transform) {
-          return this.handleVirtualTreeExpand(rows, expanded)
+          return handleVirtualTreeExpand($xeTable, rows, expanded)
         } else {
-          return this.handleBaseTreeExpand(rows, expanded)
+          return handleBaseTreeExpand($xeTable, rows, expanded)
         }
       }
     }
@@ -9225,7 +9249,8 @@ const Methods = {
       if (isScrollXBig && mouseOpts.area) {
         errLog('vxe.error.notProp', ['mouse-config.area'])
       }
-      $xeTable.$nextTick(() => {
+      calcScrollbar($xeTable)
+      return $xeTable.$nextTick(() => {
         updateStyle($xeTable)
       })
     }
@@ -9335,6 +9360,7 @@ const Methods = {
     if (isScrollYBig && mouseOpts.area) {
       errLog('vxe.error.notProp', ['mouse-config.area'])
     }
+    calcScrollbar($xeTable)
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable)
     })

package/packages/table/src/table.ts

@@ -1495,6 +1495,9 @@ export default {
     if (this.highlightHoverColumn) {
       warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover'])
     }
+    if (props.resizable) {
+      warnLog('vxe.error.delProp', ['resizable', 'column-config.resizable'])
+    }
     // if (props.scrollY) {
     //   warnLog('vxe.error.delProp', ['scroll-y', 'virtual-y-config'])
     // }

package/styles/components/table-module/filter.scss

@@ -33,9 +33,11 @@
   position: absolute;
   top: 0;
   min-width: 100px;
+  font-size: var(--vxe-ui-font-size-default);
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
+  color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
   &:not(.is--multiple) {
@@ -110,3 +112,17 @@
 .vxe-table--filter-option {
   @include baseMixin.createCheckboxIcon();
 }
+
+
+
+.vxe-table--filter-wrapper {
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}

package/styles/components/table.scss

@@ -1617,10 +1617,12 @@
     height: 1em;
     text-align: center;
     transform: translateY(-50%);
-    // background-color: var(--vxe-ui-layout-background-color);
     z-index: 1;
     user-select: none;
     cursor: pointer;
+    & > i {
+      background-color: var(--vxe-ui-layout-background-color);
+    }
   }
   .vxe-tree--node-btn {
     display: block;
@@ -1650,6 +1652,9 @@
     &.col--rs-height,
     &.col--auto-height {
       overflow: hidden;
+      &.col--tree-node {
+        overflow: unset;
+      }
       & > .vxe-cell {
         overflow: hidden;
       }