element-plus table组件单击行切换选中状态、点击高亮行、设置shift或ctrl连续多选和连续取消多选（支持多段选择）

小咪咪 2024-03-31 09:46 35阅读 0赞

##### 演示效果 #####

需求逻辑：

1.  单击行切换选中状态
2.  不按住shift或者ctrl键点击一行，设置该行高亮，该行将作为起始行
3.  连续多选：高亮行作为起始位置，按住shift或者ctrl键后选中行作为结束位置，结束位置未勾选则连续多选
4.  连续取消多选：高亮行作为起始位置，按住shift或者ctrl键后选中行作为结束位置，结束位置已勾选则连续取消多选
5.  支持多段选择  
    ![请添加图片描述][c56c21507873454b9a1630c70e4eb53d.gif]

##### 完整代码 #####

<template>
      <el-table :data="tableData" border stripe ref="table" highlight-current-row @selection-change="selectionChange" @select="selectChange" @row-click="rowClick">
        <el-table-column type="selection" width="62" align="center" />
        <el-table-column type="index" label="序号" width="62" align="center" />
        <el-table-column prop="type" label="分类" width="102" align="center" />
      </el-table>
    </template>
    <script>
    export default {
          
      data() {
          
        return {
          
          startPoint: undefined, // 多选起点
          endPoint: undefined, // 多选终点
          shiftOrCtrlkeyDown: false, // 是否按下shift键或ctrl键，默认false
          selectedRowsArr: [], // 多选选中的行
          tableData: [], // 表格数据
        }
      },
      mounted() {
          
        // 按下shift键或ctrl键
        window.addEventListener("keydown", code => {
          
          if (code.key === "Shift" || code.key === "Control") {
          
            this.shiftOrCtrlkeyDown = true
          }
        })
        // 松开shift键或ctrl键
        window.addEventListener("keyup", code => {
          
          if (code.key === "Shift" || code.key === "Control") {
          
            this.shiftOrCtrlkeyDown = false
          }
        })
        // 模拟数据
        // 注意，设置index是必要的
        // 注意，设置index是必要的
        // 注意，设置index是必要的
        for (let index = 0; index < 100; index++) {
          
          this.tableData.push({
           type: "test", index })
        }
      },
      methods: {
          
        /** 表格单击 */
        rowClick(row) {
          
          this.$refs.table.toggleRowSelection(row) // 单击行切换选中状态
          if (!this.shiftOrCtrlkeyDown) {
          
            this.startPoint = row.index
            return
          }
          const isCurrentSelected = this.selectedRowsArr.includes(row) // 当前行是否选中
          this.dealRowSelect(row, isCurrentSelected)
        },
        /** 表格多选 */
        selectionChange(rows) {
          
          this.selectedRowsArr = rows
        },
        /** 表格单选 */
        selectChange(rows, row) {
          
          if (!this.shiftOrCtrlkeyDown) {
          
            this.$refs.table.setCurrentRow(row) // 设置行高亮选择，需要加上属性highlight-current-row
            this.startPoint = row.index
            return
          }
          const isCurrentSelected = rows.includes(row) // 当前行是否选中,不能直接用selectedRowsArr判断，因为selectionChange比selectChange后执行
          this.dealRowSelect(row, isCurrentSelected)
        },
        /** 按下shift键或ctrl键选中逻辑 */
        dealRowSelect(row, isCurrentSelected) {
          
          this.endPoint = row.index
          // 如果是自下而上选择，则换序
          let temp = this.startPoint
          if (this.startPoint > this.endPoint) {
          
            this.startPoint = this.endPoint
            this.endPoint = temp
          }
          // 根据当前行是选中还是取消选中，来判断是全选还是全不选
          for (let i = this.startPoint + 1; i < this.endPoint; i++) {
          
            this.$refs.table.toggleRowSelection(this.tableData[i], isCurrentSelected)
          }
          this.$refs.table.setCurrentRow(this.tableData[temp]) // 按下shift键或ctrl键不改变高亮选中行
          // 还原起始位置
          this.startPoint = temp
        },
      },
    }
    </script>

[c56c21507873454b9a1630c70e4eb53d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/215966bcd6514037a8b2b92eae59c772.gif