releases 4.8.15

x-extends · Nov 14, 2024 · 8d5dd08 · 8d5dd08
1 parent fbe9cf0
commit 8d5dd08
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/examples/views/table/TableTest9.vue b/examples/views/table/TableTest9.vue
@@ -10,6 +10,7 @@
       :column-config="{resizable: true}"
       :scroll-x="{enabled: true, gt: 0}"
       :scroll-y="{enabled: true, gt: 0}"
+      :checkbox-config="{labelField: 'name', highlight: true, range: true}"
       :data="tableData">
       <vxe-column type="checkbox" width="60"></vxe-column>
       <vxe-column field="col0" title="列0" width="100"></vxe-column>

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

diff --git a/packages/table/module/keyboard/hook.ts b/packages/table/module/keyboard/hook.ts
@@ -34,28 +34,38 @@ hooks.add('tableKeyboardModule', {
     const { refElem } = $xeTable.getRefMaps()
     const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts } = $xeTable.getComputeMaps()
 
-    function getCheckboxRangeRows (params: any, targetTrElem: any, moveRange: any) {
+    function getCheckboxRangeRows (evnt: MouseEvent, params: any, targetTrElem: HTMLElement, trRect: DOMRect, offsetClientTop: number, moveRange: number) {
       let countHeight = 0
       let rangeRows: any[] = []
+      let moveSize = 0
       const isDown = moveRange > 0
-      const moveSize = moveRange > 0 ? moveRange : (Math.abs(moveRange) + targetTrElem.offsetHeight)
       const { scrollYLoad } = reactData
       const { afterFullData, scrollYStore } = internalData
       if (scrollYLoad) {
+        if (isDown) {
+          moveSize = offsetClientTop + moveRange
+        } else {
+          moveSize = (trRect.height - offsetClientTop) + Math.abs(moveRange)
+        }
         const _rowIndex = $xeTable.getVTRowIndex(params.row)
         if (isDown) {
           rangeRows = afterFullData.slice(_rowIndex, _rowIndex + Math.ceil(moveSize / scrollYStore.rowHeight))
         } else {
-          rangeRows = afterFullData.slice(_rowIndex - Math.floor(moveSize / scrollYStore.rowHeight) + 1, _rowIndex + 1)
+          rangeRows = afterFullData.slice(_rowIndex - Math.floor(moveSize / scrollYStore.rowHeight), _rowIndex + 1)
         }
       } else {
+        if (isDown) {
+          moveSize = evnt.clientY - trRect.y
+        } else {
+          moveSize = trRect.y - evnt.clientY + trRect.height
+        }
         const siblingProp = isDown ? 'next' : 'previous'
         while (targetTrElem && countHeight < moveSize) {
           const rowNodeRest = $xeTable.getRowNode(targetTrElem)
           if (rowNodeRest) {
             rangeRows.push(rowNodeRest.item)
             countHeight += targetTrElem.offsetHeight
-            targetTrElem = targetTrElem[`${siblingProp}ElementSibling`]
+            targetTrElem = targetTrElem[`${siblingProp}ElementSibling`] as HTMLElement
           }
         }
       }
@@ -77,7 +87,7 @@ hooks.add('tableKeyboardModule', {
         const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range') as HTMLElement
         const domMousemove = document.onmousemove
         const domMouseup = document.onmouseup
-        const trElem = cell.parentNode
+        const trElem = cell.parentElement as HTMLElement
         const selectRecords = $xeTable.getCheckboxRecords()
         let lastRangeRows: any[] = []
         const marginSize = 1
@@ -86,6 +96,8 @@ hooks.add('tableKeyboardModule', {
         const startLeft = offsetRest.offsetLeft + evnt.offsetX
         const startScrollTop = bodyWrapperElem.scrollTop
         const rowHeight = trElem.offsetHeight
+        const trRect = trElem.getBoundingClientRect()
+        const offsetClientTop = disY - trRect.y
         let mouseScrollTimeout: any = null
         let isMouseScrollDown: any = false
         let mouseScrollSpaceSize = 1
@@ -100,6 +112,7 @@ hooks.add('tableKeyboardModule', {
           let rangeWidth = Math.abs(offsetLeft)
           let rangeTop = startTop
           let rangeLeft = startLeft
+
           if (offsetTop < marginSize) {
             // 向上
             rangeTop += offsetTop
@@ -127,7 +140,7 @@ hooks.add('tableKeyboardModule', {
           checkboxRangeElem.style.left = `${rangeLeft}px`
           checkboxRangeElem.style.top = `${rangeTop}px`
           checkboxRangeElem.style.display = 'block'
-          const rangeRows = getCheckboxRangeRows(params, trElem, offsetTop < marginSize ? -rangeHeight : rangeHeight)
+          const rangeRows = getCheckboxRangeRows(evnt, params, trElem, trRect, offsetClientTop, offsetTop < marginSize ? -rangeHeight : rangeHeight)
           // 至少滑动 10px 才能有效匹配
           if (rangeHeight > 10 && rangeRows.length !== lastRangeRows.length) {
             lastRangeRows = rangeRows