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