vxe-table 3.18.1 → 3.18.2

package/packages/table/src/table.ts

@@ -40,13 +40,22 @@ function handleUpdateMergeBodyCells ($xeTable: VxeTableConstructor & VxeTablePri
   $xeTable.setMergeCells(merges)
 }
 
+function handleUpdateMergeHeaderCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  internalData.mergeHeaderList = []
+  internalData.mergeHeaderMaps = {}
+  internalData.mergeHeaderCellMaps = {}
+  $xeTable.setMergeHeaderCells(merges)
+}
+
 function handleUpdateMergeFooterCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
   const internalData = $xeTable as unknown as TableInternalData
 
   internalData.mergeFooterList = []
   internalData.mergeFooterMaps = {}
   internalData.mergeFooterCellMaps = {}
-  $xeTable.setMergeFooterItems(merges)
+  $xeTable.setMergeFooterCells(merges)
 }
 
 function handleKeyField ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
@@ -358,7 +367,10 @@ function renderScrollX (h: CreateElement, $xeTable: VxeTableConstructor & VxeTab
           ref: 'refScrollXSpaceElem',
           class: 'vxe-table--scroll-x-space'
         })
-      ])
+      ]),
+      h('div', {
+        class: 'vxe-table--scroll-x-handle-appearance'
+      })
     ]),
     h('div', {
       ref: 'refScrollXRightCornerElem',
@@ -508,9 +520,8 @@ export default {
   },
   data () {
     const xID = XEUtils.uniqueId()
-    return {
-      xID,
-      tId: xID,
+
+    const reactData: TableReactData = {
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -531,6 +542,8 @@ export default {
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       // 行高
       rowHeight: 0,
       // 表格父容器的高度
@@ -556,9 +569,13 @@ export default {
       expandColumn: null,
       checkboxColumn: null,
       radioColumn: null,
-      hasFixedColumn: false,
       // 树节点列信息
       treeNodeColumn: null,
+      hasFixedColumn: false,
+      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+      upDataFlag: 0,
+      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+      reColumnFlag: 0,
       // 初始化标识
       initStore: {
         filter: false,
@@ -566,11 +583,6 @@ export default {
         export: false,
         custom: false
       },
-      customColumnList: [],
-      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
-      upDataFlag: 0,
-      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
-      reColumnFlag: 0,
       // 自定义列相关的信息
       customStore: {
         btnEl: null,
@@ -584,6 +596,7 @@ export default {
         oldFixedMaps: {},
         oldVisibleMaps: {}
       },
+      customColumnList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -652,6 +665,7 @@ export default {
       tooltipStore: {
         row: null,
         column: null,
+        content: null,
         visible: false,
         currOpts: {}
       },
@@ -684,8 +698,8 @@ export default {
         columns: [],
         isPrint: false,
         hasFooter: false,
-        hasTree: false,
         hasMerge: false,
+        hasTree: false,
         hasColgroup: false,
         visible: false
       },
@@ -719,6 +733,8 @@ export default {
       pendingRowFlag: 1,
       insertRowFlag: 1,
       removeRowFlag: 1,
+
+      mergeHeadFlag: 1,
       mergeBodyFlag: 1,
       mergeFootFlag: 1,
 
@@ -738,6 +754,8 @@ export default {
       scrollXWidth: 0,
       isScrollXBig: false,
 
+      lazScrollLoading: false,
+
       rowExpandHeightFlag: 1,
       calcCellHeightFlag: 1,
       resizeHeightFlag: 1,
@@ -753,12 +771,18 @@ export default {
 
       isDragResize: false,
       isRowLoading: false,
-      isColLoading: false,
+      isColLoading: false
+    }
 
+    return {
+      xID,
+      ...reactData,
+
+      // 私有属性
       reScrollFlag: 0,
       reLayoutFlag: 0,
       footFlag: 0,
-
+      mergeFooteCellFlag: 0,
       crossTableDragRowInfo: crossTableDragRowGlobal
     }
   },
@@ -1499,10 +1523,23 @@ export default {
 
       handleUpdateMergeBodyCells($xeTable, value)
     },
-    mergeFooterItems (value: any) {
+    mergeHeaderCells (value: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
-      handleUpdateMergeFooterCells($xeTable, value)
+      handleUpdateMergeHeaderCells($xeTable, value)
+    },
+    mergeFooterCells () {
+      this.mergeFooteCellFlag++
+    },
+    mergeFooterItems () {
+      this.mergeFooteCellFlag++
+    },
+    mergeFooteCellFlag () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      const mFooterCells = props.mergeFooterCells || props.mergeFooterItems
+      handleUpdateMergeFooterCells($xeTable, mFooterCells || [])
     },
 
     computeRowGroupFields (val: any) {

package/packages/table/src/util.ts

@@ -73,6 +73,7 @@ export function createInternalData (): TableInternalData {
     tableFullColumn: [],
     // 渲染所有列
     visibleColumn: [],
+
     // 全量数据集（包括当前和已删除）
     fullAllDataRowIdData: {},
     // 数据集（仅当前）
@@ -84,16 +85,22 @@ export function createInternalData (): TableInternalData {
     fullColumnIdData: {},
     fullColumnFieldData: {},
 
+    // 合并表头单元格的数据
+    mergeHeaderList: [],
+    mergeHeaderMaps: {},
+    // 已合并单元格数据集合
+    mergeHeaderCellMaps: {},
     // 合并单元格的数据
     mergeBodyList: [],
     mergeBodyMaps: {},
+    // 已合并单元格数据集合
+    mergeBodyCellMaps: {},
     // 合并表尾的数据
     mergeFooterList: [],
     mergeFooterMaps: {},
-    // 已合并单元格数据集合
-    mergeBodyCellMaps: {},
     // 已合并表尾数据集合
     mergeFooterCellMaps: {},
+
     // 已展开的行集合
     rowExpandedMaps: {},
     // 懒加载中的展开行的集合
@@ -194,6 +201,73 @@ export const convertHeaderColumnToRows = (originColumns: any) => {
   return rows
 }
 
+export function convertHeaderToGridRows (spanColumns: VxeTableDefines.ColumnInfo[][]) {
+  const rSize = spanColumns.length
+  const cSize = spanColumns[0].reduce((sum, cell) => sum + cell.colSpan, 0)
+
+  const occupiedRows: boolean[][] = []
+  const fullRows: any[][] = []
+  for (let rIndex = 0; rIndex < rSize; rIndex++) {
+    const oCols: boolean[] = []
+    const dCols: string[] = []
+    for (let cIndex = 0; cIndex < cSize; cIndex++) {
+      oCols.push(false)
+      dCols.push('')
+    }
+    occupiedRows.push(oCols)
+    fullRows.push(dCols)
+  }
+
+  for (let rIndex = 0; rIndex < rSize; rIndex++) {
+    let currColIndex = 0
+    for (const column of spanColumns[rIndex]) {
+      const { colSpan, rowSpan } = column
+      let startColIndex = -1
+      for (let ccIndex = currColIndex; ccIndex <= cSize - colSpan; ccIndex++) {
+        let oFlag = true
+        for (let csIndex = 0; csIndex < colSpan; csIndex++) {
+          if (occupiedRows[rIndex][ccIndex + csIndex]) {
+            oFlag = false
+            break
+          }
+        }
+        if (oFlag) {
+          startColIndex = ccIndex
+          break
+        }
+      }
+      if (startColIndex === -1) {
+        for (let j = 0; j <= cSize - colSpan; j++) {
+          let oFlag = true
+          for (let k = 0; k < colSpan; k++) {
+            if (occupiedRows[rIndex][j + k]) {
+              oFlag = false
+              break
+            }
+          }
+          if (oFlag) {
+            startColIndex = j
+            break
+          }
+        }
+        if (startColIndex === -1) {
+          // error
+          break
+        }
+      }
+
+      for (let srIndex = rIndex; srIndex < rIndex + rowSpan; srIndex++) {
+        for (let scIndex = startColIndex; scIndex < startColIndex + colSpan; scIndex++) {
+          occupiedRows[srIndex][scIndex] = true
+          fullRows[srIndex][scIndex] = column
+        }
+      }
+      currColIndex = startColIndex + colSpan
+    }
+  }
+  return fullRows
+}
+
 export function restoreScrollLocation ($xeTable: VxeTableConstructor, scrollLeft: number, scrollTop: number) {
   const internalData = $xeTable as unknown as TableInternalData
 

package/styles/components/table.scss

@@ -645,9 +645,6 @@ $btnThemeList: (
     overflow-x: scroll;
     height: 18px;
   }
-  .vxe-table--scroll-x-wrapper {
-    height: 100%;
-  }
   .vxe-table--scroll-y-handle,
   .vxe-table--scroll-y-wrapper {
     width: 100%;
@@ -891,13 +888,6 @@ $btnThemeList: (
     right: auto;
     left: -0.3em;
   }
-  .vxe-header--column {
-    &:last-child {
-      & > .vxe-cell--col-resizable {
-        left: 0;
-      }
-    }
-  }
 }
 
 .vxe-body--column {
@@ -1415,32 +1405,25 @@ $btnThemeList: (
     .vxe-table--scroll-y-bottom-corner {
       border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
     }
-    .vxe-table--scroll-x-wrapper {
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        pointer-events: none;
-      }
+    .vxe-table--scroll-x-handle-appearance {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
     }
     &.sx-pos--top {
-      .vxe-table--scroll-x-wrapper {
-        &::after {
-          top: 0;
-          border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-        }
+      .vxe-table--scroll-x-handle-appearance {
+        top: 0;
+        border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
       }
     }
     &.sx-pos--bottom {
-      .vxe-table--scroll-x-wrapper {
-        &::after {
-          bottom: 0;
-          height: calc(100% + var(--vxe-ui-table-border-width));
-          border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-        }
+      .vxe-table--scroll-x-handle-appearance {
+        bottom: 0;
+        height: calc(100% + var(--vxe-ui-table-border-width));
+        border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
       }
     }
   }
@@ -1514,32 +1497,25 @@ $btnThemeList: (
         }
       }
     }
-    .vxe-table--scroll-y-wrapper {
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        pointer-events: none;
-      }
+    .vxe-table--scroll-y-handle-appearance {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
     }
     &.sy-pos--left {
-      .vxe-table--scroll-y-wrapper {
-        &::after {
-          left: 0;
-          border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-        }
+      .vxe-table--scroll-y-handle-appearance {
+        left: 0;
+        border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
       }
     }
     &.sy-pos--right {
-      .vxe-table--scroll-y-wrapper {
-        &::after {
-          right: 0;
-          width: calc(100% + var(--vxe-ui-table-border-width));
-          border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-        }
+      .vxe-table--scroll-y-handle-appearance {
+        right: 0;
+        width: calc(100% + var(--vxe-ui-table-border-width));
+        border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
       }
     }
   }
@@ -2159,8 +2135,8 @@ $btnThemeList: (
       position: absolute;
       left: 50%;
       font-size: 12px;
-      line-height: 1.2em;
-      transform: translateX(-50%);
+      line-height: 1em;
+      transform: translate(-50%, -50%);
       text-align: left;
       z-index: 4;
       padding: 0 var(--vxe-ui-table-cell-padding-default);
@@ -2172,7 +2148,7 @@ $btnThemeList: (
       pointer-events: auto;
     }
     .vxe-cell--valid-error-theme-beautify {
-      padding: 0.2em 0.6em 0.3em 0.6em;
+      padding: 0.2em 0.6em 0.25em 0.6em;
       color: #fff;
       background-color: var(--vxe-ui-table-validate-error-color);
       .vxe-cell--valid-error-msg {
@@ -2204,10 +2180,12 @@ $btnThemeList: (
       &:last-child {
         .vxe-cell--valid-error-tip {
           bottom: calc(100%);
+          transform: translate(-50%, 50%);
         }
         &:first-child {
           .vxe-cell--valid-error-tip {
             bottom: auto;
+            transform: translate(-50%, -50%);
           }
         }
       }