<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;
},
}
el-table中添加shift 多选和单击滑动多选
最新推荐文章于 2024-05-10 16:10:34 发布