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

最新推荐文章于 2024-05-09 18:58:22 发布

TortyE

最新推荐文章于 2024-05-09 18:58:22 发布

阅读量121

点赞数 1

分类专栏： Element UI 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/tortye/article/details/137076995

版权

Element UI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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;
    },
}