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

演示效果

需求逻辑：

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

完整代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84