diff --git a/examples/views/table/TableTest9.vue b/examples/views/table/TableTest9.vue
index 48d6a91422..f87454e3f5 100644
--- 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">
diff --git a/package.json b/package.json
index 3fa21502e6..1660ffc470 100644
--- 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
index 23bdb01c1a..cf905756ef 100644
--- 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