el-table增加按住shift连续多选功能

使用背景

使用Element-UI的表格功能，实现按住shift键点击连续勾选的功能。

结果演示视频

shift批量勾选

实现内容

1. 按住shift后，可以实现任意两个勾选项直接内容的连续勾选
2. 松开shift后，连续勾选从新开始
3. 点击发货将勾选所有的数据进行发货
4. 勾选的行背景色高亮

代码主要逻辑

1. . 监听shift是否按下的状态
2. . 在方法中判断
   2.1 按住了shift
   2.2.1 之前有多选起点 —> 则当前行index为多选终点，勾选起点终点之间的数据，起点终点置空
   2.2.2 之前没有多选起点 —> 则当前行index为多选起点
   2.2. 松开了shift —> 则起点终点置空
3. 判断原先选择内容和当前选中的，原来的数组长表示当前取消勾选，否则表示当前勾选
4. 连续选择，则在方法中把所有选中的数据都标记为高亮

实现代码

HTML部分

增加@selection-change=“handleSelectionChange” @select=“shiftSelect” :row-class-name=“handleRowClassName”

<el-table ref="info" :data="tableData" @selection-change="handleSelectionChange" @select="shiftSelect" :row-class-name="handleRowClassName" height="calc(100%)" border v-loading="loading" highlight-current-row>
    （此处为表格内容）
</el-table>

JS部分

1. 定义变量

<script>
	data() {
	    return {
	          startPoint: undefined,// 多选起点
	          endPoint: undefined,// 多选终点
	          pin: false,// 是否按住，默认不按住
	      }
	}
</script>

2. 判断shift是否按下

<script>
	mounted() {
	    // 监听keydown：获取键盘按住事件,code返回按住的键信息
	    window.addEventListener('keydown', code => {
	        // 判断是否按住了shift键（左右都包括）
	        if (code.keyCode == 16 && code.shiftKey) {
	            this.pin = true;// 标记按住了shift键
	        }
	    });
	    // 监听keyup：获取键盘松开事件,code返回按住的键信息
	    window.addEventListener('keyup', code => {
	        // 判断是否松开了shift键（左右都包括），以为之前已经按下了code.shiftKey已经是true
	        if (code.keyCode == 16) {
	            this.pin = false;// 标记松开了shift键
	            this.startPoint = undefined;// 清空多选起点
	            this.endPoint = undefined;// 清空多选终点
	        }
	    });
	},
</script>

3. 定义每个数据的index(唯一标识)

<script>
	this.tableData.forEach((item, index) => {
	    item.index = index;
	});
</script>

4. 高亮行

<script> 
	// 高亮行
	handleRowClassName({row, rowIndex}) {
		// highLightBg 为 'selected'的高亮
	    return row.highLightBg == 'selected' ? 'high-light-bg' : '';
	},
</script>

5. 定义多选方法

<script> 
	// 多选
	handleSelectionChange(rows) {
	    // 所有选中的数据标记为高亮
	    rows.forEach(item => {
	        item.highLightBg = 'selected';
	    });
	    // 取消全选
	    if (!rows.length) {
	        this.tableData.forEach(item => {
	            item.highLightBg = '';
	        });
	    }
	    this.selectDatas = JSON.parse(JSON.stringify(rows));
	},
</script>

6.判断是否连续多选的方法

<script> 
	// 按住shift多选
	shiftSelect(rows, row) {
	    // 判断原来选择的数组长度selectDatas和现在的长度rows
	    if (this.selectDatas.length > rows.length) {
	        // 原来的长，说明取消勾选了，把当前条取消高亮
	        row.highLightBg = '';
	    }else{
	        // 现在的长，说明多勾选了，把当前条高亮
	        row.highLightBg = 'selected';
	    }
	    // 判断是勾选的时候才会多选
	    if (rows.length < this.selectDatas.length) {
	        this.startPoint = undefined;// 清空多选起点
	        this.endPoint = undefined;// 清空多选终点
	        return;
	    }
	    // 判断此时有没有按住shift键
	    // 按住了则表示开始多选，没有则停止多选，清空起点终点.
	    // 开始多选则判断之前是否有起点
	    // 有则当前的index标记为终点且勾选这之间的数据，勾选结束清空起点终点
	    // 没有则当前的index标记为起点
	    // 记录当前的index为多选起点
	    if (this.pin) { // 按住了shift键
	        if (this.startPoint || this.startPoint == 0) { // 之前有多选起点（第一条单独）
	            this.endPoint = row.index;// 把当前项的index标记为多选终点
	            if (this.startPoint > this.endPoint) { // 如果起点大于终点，则替换否则保留，确保起点始终小于终点
	                let temp = this.startPoint;
	                this.startPoint = this.endPoint;
	                this.endPoint = temp;
	            }
	            // 避免和handleSelectionChange冲突导致返回的数据不准确
	            setTimeout(() => {
	                // 勾选数据
	                for (let i = this.startPoint + 1; i < this.endPoint; i++) {
	                    this.$refs.info.toggleRowSelection(this.tableData[i],true);
	                }
	                this.startPoint = undefined;// 清空多选起点
	                this.endPoint = undefined;// 清空多选终点
	            }, 100);
	        }else{ // 之前没有多选起点
	            this.startPoint = row.index;// 把当前项的index标记为多选起点
	        }
	    }else{ // 没按住shift键
	        this.startPoint = undefined;// 清空多选起点
	        this.endPoint = undefined;// 清空多选终点
	    }
	},
</script>