el-table中添加shift 多选和单击滑动多选

<el-table
ref="table"
@mousedown.native="mousedownTable"
@row-click="row_click"
@cell-mouse-enter="cell_mouse_enter"
@cell-mouse-leave="cell_mouse_leave"
@mouseup.native="mouseupTable"
@mouseleave.native="mouseupTable"
>

</el-table>
data(){
        lastSelectedRow:null, //  shift选中
      isMousedownTable: false, //是否按下表格
      currentEnterRow: null, //当前移入的行数据
}
methods:{
    
mousedownTable(d) {
      this.currentEnterRow &&
        !this.currentEnterRow.disabled 
      this.isMousedownTable = true;
    },
    // 单击表格行
    row_click(row, column, event) {
      if (event.shiftKey) {
        const startIndex = this.dataSource.indexOf(this.lastSelectedRow)
        const endIndex = this.dataSource.indexOf(row)
        console.log(startIndex,endIndex,'endIndex')
        const inBetween = (startIndex >= 0 && endIndex >= 0) && (startIndex <= endIndex);
        console.log(inBetween,'inb')
        if (inBetween) {
          for (let i = startIndex+1; i <= endIndex; i++) {
            console.log(this.dataSource[i],'this.dataSource[i]')
            this.$refs.table.toggleRowSelection([{row:this.dataSource[i],type:'true'}])
          }
        }
      }else{
         this.$refs.table.toggleRowSelection([{row:row,type:'true'}])
      }
      this.lastSelectedRow = row;
    },
    // 进入单元格
    cell_mouse_enter(row, column, cell, event) {
      this.isMousedownTable && !row.disabled && this.$refs.table.toggleRowSelection([{row:row,type:'true'}]);
      this.currentEnterRow = row;
    },
    // 离开单元格
    cell_mouse_leave(row, column, cell, event) {
      this.currentEnterRow = null;
    },
    // 鼠标弹起或者离开表格
    mouseupTable(d) {
      this.isMousedownTable = false;
    },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值