加checkBox的表格,拖动选择

之前遇到一个需求,用户我不想一个一个选择复选框我想鼠标点击滑动就可以选择多条数据,我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;
    },

完事,实现了,懒死你得了

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值