vue el-checkbox按下shift键实现批量选择数据

最新推荐文章于 2024-01-12 15:28:23 发布

sqwu

最新推荐文章于 2024-01-12 15:28:23 发布

阅读量3.2k

点赞数 1

分类专栏： vue element

本文链接：https://blog.csdn.net/qq_42345108/article/details/115181638

版权

本文介绍了如何在 Vue 中利用 shift 键实现批量选择数据，通过监听键盘事件、设置标志位和处理 change 事件来完成。详细步骤包括添加 HTML 代码、初始化数据、设置 flag、处理 el-checkbox 的 change 事件、记录点击项、实现全选、反选及优化，如使用防抖函数提高性能。

摘要由CSDN通过智能技术生成

1.先看下效果

在这里插入图片描述

2.代码分析

1.添加html代码，先将列表写出来

<el-button @click="checkAll(true)">全选</el-button>
 <el-button @click="checkAll(false)">全不选</el-button>
 <el-button @click="checkInvert">反选</el-button>
<el-checkbox-group v-model="selectData" class="checkbox-group" @change="selectionChange">
    <el-checkbox
    	v-for="(val, key) in tableData"
    	:key="key"
    	:label="val"
    	@click.native="itemClick(val)"
    >
    	{
  { val.name }}
    </el-checkbox>
</el-checkbox-group>

2.初始化数据：给原数据添加index属性

created() {
   
   this.tableData.forEach((item, index) => {
    // 遍历索引,赋值给data数据
     item.index = index
   })
 },

3.设置一个flag记录是否按下了shift键，通过监听键盘按下和松开给flag赋值

window.addEventListener('keydown', code => {
   
 if (code.keyCode === 16 && code.shiftKey) {
    // 判断是否按住shift键，是就把pin赋值为true
     this.pin = true
   }
 })
window.addEventListener('keyup', code => {
   
  if(code.keyCode === 16){
    // 判断是否松开shift键，是就把pin赋值为false
    this.pin = false
  }
 })

4.el-checkbox勾选会触发change事件，所以在change绑定的selectionChange函数进行操作：当按住shift键时，将起止区间内的数据都选上

// 多选框勾选触发
selectionChange(item) {
   
 const data = this.tableData // 获取所有数据
 const origin = this.origin // 起点数 从-1开始
 const endIdx = item.length === 0 ? -1 : item[item.length - 1].index // 终点数
 if (this.pin && item.includes(data[origin])) {
    // 判断按住
   const sum = Math.abs(origin - endIdx) + 1 // 这里记录终点
   const min = Math.min(origin, endIdx) // 这里记录起点
   let i = 0
   while (i < sum) {
   
     const index = min + i
     const flagIdx = this.selectData.indexOf(data[index]) // 判断区间内的数据是否已选中
     if (flagIdx === -1) {
    // 值为-1表示未选中
       this.selectData.push(data[</