releases 4.10.6

x-extends · Jan 14, 2025 · 2a0a913 · 2a0a913
1 parent 49114b6
commit 2a0a913
Show file tree

Hide file tree

Showing 10 changed files with 589 additions and 374 deletions.
diff --git a/examples/views/table/TableTest8.vue b/examples/views/table/TableTest8.vue
@@ -13,7 +13,7 @@
       :scroll-y="{enabled: true, gt: 0}"
       :data="tableData"
       :footer-data="footerData">
-      <vxe-column type="checkbox" width="80" fixed="left" drag-sort></vxe-column>
+      <vxe-column field="checkbox" type="checkbox" width="80" fixed="left" drag-sort></vxe-column>
       <vxe-column field="col0" title="列0" width="100" fixed="left"></vxe-column>
       <vxe-column field="imgUrl" title="列1" width="80" fixed="left" :cell-render="imgUrlCellRender"></vxe-column>
       <vxe-column field="col2" title="列2" width="90"></vxe-column>
@@ -189,5 +189,5 @@ const loadData = (rowSize: number) => {
   }, 350)
 }
 
-loadData(200)
+loadData(20)
 </script>
diff --git a/examples/views/table/TableTest9.vue b/examples/views/table/TableTest9.vue
@@ -1,22 +1,28 @@
 <template>
   <div>
-    <vxe-button @click="loadData(0)">加载0条</vxe-button>
-    <vxe-button @click="loadData(5)">加载5条</vxe-button>
-    <vxe-button @click="loadData(50)">加载50条</vxe-button>
-    <vxe-button @click="loadData(5000)">加载5k条</vxe-button>
-    <vxe-button @click="loadData(10000)">加载1w条</vxe-button>
-    <vxe-button @click="loadData(30000)">加载3w条</vxe-button>
+    <p>
+      <vxe-button @click="loadData(0)">加载0条</vxe-button>
+      <vxe-button @click="loadData(5)">加载5条</vxe-button>
+      <vxe-button @click="loadData(50)">加载50条</vxe-button>
+      <vxe-button @click="loadData(5000)">加载5k条</vxe-button>
+      <vxe-button @click="loadData(10000)">加载1w条</vxe-button>
+      <vxe-button @click="loadData(30000)">加载3w条</vxe-button>
+    </p>
+
     <vxe-table
       border
+      show-footer
       show-overflow
       height="800"
       :loading="loading"
       :column-config="{resizable: true,drag: true}"
       :row-config="{drag: true}"
       :scroll-x="{enabled: true, gt: 0}"
       :scroll-y="{enabled: true, gt: 0}"
-      :data="tableData">
-      <vxe-column type="checkbox" width="80" fixed="left" drag-sort></vxe-column>
+      :scrollbar-config="{x:{position:'top'},y:{position:'left'}}"
+      :data="tableData"
+      :footer-data="footerData">
+      <vxe-column field="checkbox" type="checkbox" width="80" fixed="left" drag-sort></vxe-column>
       <vxe-column field="col0" title="列0" fixed="left" width="100"></vxe-column>
       <vxe-column field="imgUrl" title="列1" width="80" :cell-render="imgUrlCellRender"></vxe-column>
       <vxe-column field="col2" title="列2" width="90"></vxe-column>
@@ -128,6 +134,10 @@ interface RowVO {
 const tableData = ref<RowVO[]>([])
 const loading = ref(false)
 
+const footerData = ref([
+  { col2: '456', col3: '324', col4: '98', col6: '11', col74: '546', col75: '78', col83: '45', col86: '444' }
+])
+
 const flag1CellRender = reactive<VxeColumnPropTypes.CellRender>({
   name: 'VxeSwitch'
 })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.10.6-beta.4",
+  "version": "4.10.6-beta.9",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

diff --git a/packages/table/module/edit/hook.ts b/packages/table/module/edit/hook.ts
@@ -86,7 +86,7 @@ hooks.add('tableEditModule', {
           }
           parentChilds[funcName](item)
           mapChilds[funcName](item)
-          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, oTop: 0 }
+          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, oTop: 0 }
           fullDataRowIdData[rowid] = rest
           fullAllDataRowIdData[rowid] = rest
         } else {
@@ -97,7 +97,7 @@ hooks.add('tableEditModule', {
           }
           afterFullData[funcName](item)
           tableFullTreeData[funcName](item)
-          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, oTop: 0 }
+          const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, oTop: 0 }
           fullDataRowIdData[rowid] = rest
           fullAllDataRowIdData[rowid] = rest
         }
@@ -122,7 +122,7 @@ hooks.add('tableEditModule', {
         } else {
           newRecords.forEach(item => {
             const rowid = getRowid($xeTable, item)
-            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, oTop: 0 }
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, oTop: 0 }
             fullDataRowIdData[rowid] = rest
             fullAllDataRowIdData[rowid] = rest
             afterFullData.unshift(item)
@@ -144,7 +144,7 @@ hooks.add('tableEditModule', {
           } else {
             newRecords.forEach(item => {
               const rowid = getRowid($xeTable, item)
-              const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, oTop: 0 }
+              const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, treeIndex: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, oTop: 0 }
               fullDataRowIdData[rowid] = rest
               fullAllDataRowIdData[rowid] = rest
               afterFullData.push(item)
@@ -184,7 +184,7 @@ hooks.add('tableEditModule', {
                   targetIndex = targetIndex + 1
                 }
                 parentMapChilds.splice(targetIndex, 0, item)
-                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, oTop: 0 }
+                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, oTop: 0 }
                 fullDataRowIdData[rowid] = rest
                 fullAllDataRowIdData[rowid] = rest
               })

diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts
@@ -61,7 +61,7 @@ export default defineComponent({
       let prevRow = null
       if (rest) {
         rLevel = rest.level
-        prevRow = rest.items[rest._index - 1]
+        prevRow = rest.items[rest.treeIndex - 1]
       }
       const isFirstRow = $xeTable.eqRow(afterFullData[0], row)
       if (treeConfig && treeNode && (treeOpts.showLine || treeOpts.line)) {
@@ -257,6 +257,29 @@ export default defineComponent({
       if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
         isDirty = $xeTable.isUpdateByRow(row, column.field)
       }
+
+      const isVNAutoHeight = scrollYLoad && !hasEllipsis
+      let cellHeight = 0
+      const vnHeight = isCalcCellHeight ? rest.height : 0
+      if (hasEllipsis) {
+        if (customRHeight) {
+          cellHeight = customRHeight
+        } else if (!isAllOverflow) {
+          cellHeight = vnHeight || defaultRowHeight || 18
+        }
+      } else {
+        cellHeight = vnHeight || defaultRowHeight || 18
+      }
+
+      const tcStyle: Record<string, string> = {}
+      if (cellHeight) {
+        if (hasEllipsis) {
+          tcStyle.maxHeight = `${cellHeight}px`
+        } else if (isVNAutoHeight) {
+          tcStyle.height = `${cellHeight}px`
+        }
+      }
+
       const tdVNs: any[] = []
       if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
         tdVNs.push(
@@ -266,9 +289,7 @@ export default defineComponent({
               'c--tooltip': showTooltip,
               'c--ellipsis': showEllipsis
             }],
-            style: {
-              maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-            }
+            style: tcStyle
           })
         )
       } else {
@@ -281,11 +302,15 @@ export default defineComponent({
               'c--tooltip': showTooltip,
               'c--ellipsis': showEllipsis
             }],
-            style: {
-              maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-            },
+            style: tcStyle,
             title: showTitle ? $xeTable.getCellLabel(row, column) : null
-          }, column.renderCell(params))
+          }, isVNAutoHeight
+            ? [
+                h('div', {
+                  class: 'vxe-cell--auto-wrapper'
+                }, column.renderCell(params))
+              ]
+            : column.renderCell(params))
         )
         if (showValidTip && errorValidItem) {
           const errRule = errorValidItem.rule
@@ -315,17 +340,6 @@ export default defineComponent({
           )
         }
       }
-      let cellHeight = ''
-      const vnHeight = isCalcCellHeight ? rest.height : 0
-      if (hasEllipsis) {
-        if (customRHeight) {
-          cellHeight = `${customRHeight}px`
-        } else if (!isAllOverflow) {
-          cellHeight = `${vnHeight || defaultRowHeight || 18}px`
-        }
-      } else {
-        cellHeight = `${vnHeight || defaultRowHeight || 18}px`
-      }
 
       if (mouseConfig && mouseOpts.area && selectCellToRow) {
         if (
@@ -342,11 +356,11 @@ export default defineComponent({
       const isLastColumn = $columnIndex === columns.length - 1
       const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-      let isPreLoadStatus = false
-      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex || _rowIndex > scrollYStore.visibleEndIndex)) {
-        isPreLoadStatus = true
-      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-        isPreLoadStatus = true
+      let isVNPreEmptyStatus = false
+      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+        isVNPreEmptyStatus = true
+      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+        isVNPreEmptyStatus = true
       }
 
       return h('td', {
@@ -361,6 +375,7 @@ export default defineComponent({
             'col--tree-node': treeNode,
             'col--edit': isEdit,
             'col--ellipsis': hasEllipsis,
+            'col--auto-height': isVNAutoHeight,
             'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
             'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
@@ -377,10 +392,10 @@ export default defineComponent({
         key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
         ...attrs,
         style: Object.assign({
-          height: cellHeight
+          height: cellHeight ? `${cellHeight}px` : ''
         }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle),
         ...tdOns
-      }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs)
+      }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs)
     }
 
     const renderRows = (fixedType: VxeColumnPropTypes.Fixed, isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) => {

diff --git a/packages/table/src/footer.ts b/packages/table/src/footer.ts
@@ -156,9 +156,9 @@ export default defineComponent({
         const isLastColumn = $columnIndex === tableColumn.length - 1
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-        let isPreLoadStatus = false
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true
+        let isVNPreEmptyStatus = false
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true
         }
 
         return h('td', {
@@ -182,7 +182,7 @@ export default defineComponent({
               'c--tooltip': showTooltip,
               'c--ellipsis': showEllipsis
             }]
-          }, isPreLoadStatus ? [] : column.renderFooter(cellParams))
+          }, isVNPreEmptyStatus ? [] : column.renderFooter(cellParams))
         ])
       })
     }

diff --git a/packages/table/src/header.ts b/packages/table/src/header.ts
@@ -27,7 +27,7 @@ export default defineComponent({
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
     const { refElem: tableRefElem, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps()
-    const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts, computeScrollbarXToTop } = $xeTable.getComputeMaps()
 
     const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
 
@@ -47,13 +47,15 @@ export default defineComponent({
     const resizeMousedownEvent = (evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) => {
       const { column } = params
       const { fixedType } = props
+      const { scrollbarHeight } = tableReactData
       const { elemStore, visibleColumn } = tableInternalData
       const resizableOpts = computeResizableOpts.value
       const tableEl = tableRefElem.value
       const leftContainerElem = refLeftContainer.value
       const rightContainerElem = refRightContainer.value
       const resizeBarElem = refCellResizeBar.value
       const resizeTipElem = refCellResizeTip.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
       const { clientX: dragClientX } = evnt
       const wrapperElem = refElem.value
       const dragBtnElem = evnt.target as HTMLDivElement
@@ -103,6 +105,7 @@ export default defineComponent({
       const updateEvent = (evnt: MouseEvent) => {
         evnt.stopPropagation()
         evnt.preventDefault()
+        const tableHeight = tableEl.clientHeight
         const offsetX = evnt.clientX - dragClientX
         let left = dragPosLeft + offsetX
         const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft
@@ -120,6 +123,8 @@ export default defineComponent({
         dragLeft = Math.max(left, dragMinLeft)
         const resizeBarLeft = Math.max(1, dragLeft - scrollLeft)
         resizeBarElem.style.left = `${resizeBarLeft}px`
+        resizeBarElem.style.top = `${scrollbarXToTop ? scrollbarHeight : 0}px`
+        resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - scrollbarHeight : tableHeight}px`
         if (resizableOpts.showDragTip && resizeTipElem) {
           const tableWidth = tableEl.clientWidth
           const wrapperRect = wrapperElem.getBoundingClientRect()
@@ -133,7 +138,7 @@ export default defineComponent({
             resizeTipLeft += tableWidth - resizeBarLeft
           }
           resizeTipElem.style.left = `${resizeTipLeft}px`
-          resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
+          resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
           resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)])
         }
       }
@@ -241,9 +246,9 @@ export default defineComponent({
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-        let isPreLoadStatus = false
-        if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true
+        let isVNPreEmptyStatus = false
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true
         }
 
         return h('th', {
@@ -277,7 +282,7 @@ export default defineComponent({
               'c--tooltip': showTooltip,
               'c--ellipsis': showEllipsis
             }]
-          }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
+          }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
           /**
            * 列宽拖动
            */