之前遇到一个需求,用户我不想一个一个选择复选框我想鼠标点击滑动就可以选择多条数据,我TM的想笑,你事怎么那么多,但是还是得整啊。。。。
1.在你table上加上
@mousedown.native="handleMouseDown($event)" @mousemove.native="handleMouseMove($event)" @mouseup.native="handleMouseUp($event)"
这三个方法
2.对这三个方法写上自己的逻辑
//鼠标按下时 handleMouseDown(event) { this.startX = event.clientX; this.startY = event.clientY; }, //鼠标移动时 handleMouseMove(event) { if (this.startX !== null && this.startY !== null) { this.isDragging = true; this.endX = event.clientX; this.endY = event.clientY; const tableEl = document.querySelector('.ant-table-tbody'); const rows = tableEl.querySelectorAll('.ant-table-row'); rows.forEach((row, index) => { const rowRect = row.getBoundingClientRect(); const rowTop = rowRect.top + window.scrollY; const rowBottom = rowRect.bottom + window.scrollY; if (rowTop <= this.endY && rowBottom >= this.startY && !this.data[index].checked) { this.data[index].checked = true; this.selectedRowKeys.push(this.data[index].id); } }); } }, //鼠标松开时 handleMouseUp(event) { this.startX = null; this.startY = null; this.endX = null; this.endY = null; this.isDragging = false; },
完事,实现了,懒死你得了