el-table鼠标滚动勾选或取消勾选使用混入的公共js封装vue2vue3都可用

使用混入进行引入

import keyMouseMove from '@/utils/keyMouseMove.js'

mixins: [ keyMouseMove ]

/**
 * dingwangjun 2024-09-10
 * 思想灵感来源-人工智能-GPT
 * @returns 鼠标按键滑动事件处理逻辑
 * 体会思想和方便以及逻辑处理手法-公共组件
 * el-table通过数据按下左键进行滑动选择勾选取消勾选数据
 * el-table定义方法@mousedown.native="handleToMouseDown"
 * el-table定义方法@mousemove.native="handleToMouseMove"
 * el-table定义方法@mouseup.native="handleToMouseUp"
 @mousedown.native="handleToMouseDown"
 @mousemove.native="handleToMouseMove"
 @mouseup.native="handleToMouseUp"
 * 然后调用此js公共方法即可;判断逻辑需要在您的页面进行处理
 使用混入进行引入
 import keyMouseMove from '@/utils/keyMouseMove.js'
 mixins: [ keyMouseMove ]
 */

export default {
  data() {
    return {
      isDowning: false, //是否进行了点击
      dragging: false,  //是否正在拖动选择
      isSelecting: true,//当前是选择还是取消
      startRowIndex: null,//记录开始行索引
      /**
       * 以上三个字段须在您本页面进行初始化定义
       * 或在您本页面通过this.或proxy.进行方法
       **/
    }
  },
  methods: {
    // 鼠标按下事件-调用方法-只限制鼠标左键
    handleMouseDownDwj(event,mb_list,xz_list){
      if(event.button==0){
        this.isDowning = true
        let targeted_list = mb_list
        let selected_list = xz_list
        const tr = event.target.closest('tr');
        if(tr){
          let tr_child = tr.parentNode.children
          const rowIndex = Array.from(tr_child).indexOf(tr);
          const row = targeted_list[rowIndex];
          // 判断当前行是否已经选中
          const isRowSelected = selected_list.includes(row);

          // 记录是选中操作还是取消操作
          this.isSelecting = !isRowSelected;
          this.startRowIndex = rowIndex;
          this.dragging = true; //开始拖动
        }
      }
    },
    // 鼠标移动事件-调用方法
    handleMouseMoveDwj(event,mb_list,tableRef){
      if(this.dragging&&this.isDowning){
        const tr = event.target.closest('tr');
        if(tr){
          let tr_child = tr.parentNode.children
          const rowIndex = Array.from(tr_child).indexOf(tr);
          let ksindex = this.startRowIndex
          let jsindex = rowIndex
          let isSelecting = this.isSelecting
          this.toggleRowsInRange(ksindex,jsindex,isSelecting,mb_list,tableRef);
          if(ksindex!==jsindex){
            // 键盘移除后清除选中的文本避免键盘有选中
            window.getSelection().removeAllRanges();
          }
        }
      }
    },
    // 鼠标松开事件结束-调用方法
    handleMouseUpDwj(event,xz_list){
      this.dragging = false;
      this.isDowning = false;
      let selected_list = xz_list
      const tr = event.target.closest('tr');
      let tr_child = tr.parentNode.children
      const rowIndex = Array.from(tr_child).indexOf(tr);
      if(this.startRowIndex!==rowIndex){
        // 键盘移除后清除选中的文本避免键盘有选中
        window.getSelection().removeAllRanges();
        // 发送数据到对应方法
        this.sendSelectedDataList(selected_list)
      }
    },
    // 根据范围批量选择或取消选择行-本js调用方法
    toggleRowsInRange(start,end,isSelecting,mb_list,tableRef){
      if(start!==end){
        let targeted_list = mb_list
        const selection = tableRef;
        const minIndex = Math.min(start, end);
        const maxIndex = Math.max(start, end);
        // 批量选择或取消选择范围内的行
        for(let i=minIndex;i<=maxIndex;i++){
          const row = targeted_list[i];
          if(isSelecting){
            // 勾选选中行
            selection.toggleRowSelection(row,true);
          }else{
            // 取消选中行
            selection.toggleRowSelection(row,false);
          }
        }
      }
    },
    // 发送数据空方法,需要您来继承
    sendSelectedDataList(list){
      console.log('这就是一个空方法-我就啥也不干谁想干谁用')
    },
  }
}