vue按住shift键多选，按住ctrl取消选中的数据（以element框架的table为例）

一、如图所示

选中某一行，然后按下shift键，选中另一行，中间所有数据，包括原来选中的两行数据都会被选中，注意是选中行，而不是勾选复选框

选中某一行，然后按下ctrl键，选中另一行，中间所有数据，包括原来选中的两行数据都会被取消勾选，注意是选中行，而不是勾选复选框

二、具体代码如下

      <el-table
        v-loading="loading"
        :data="dataList"
        @selection-change="handleSelectionChange"
        ref="dataList"
        :row-style="rowStyle"
        :height="tableHeight"
        @row-click="handleRowClick"
        border
        :row-class-name="tableRowClassName"
      >
     // 以下变量定义在data里
      lastSelectedRowIndex: null, // 用于记录上次点击的行索引
      lastSelectedRow: null, // 上一次选中的行
      selectedRow: null, // 当前选中的行

    //  点击行选择数据
    handleRowClick(row, column, event) {
      this.lastSelectedRow = this.selectedRow; // 记录上一次选中的行
      this.selectedRow = row; // 记录当前选中的行
      this.lastSelectedRowIndex = this.dataList.indexOf(row);
      if (this.lastSelectedRow && event.shiftKey) {
        // 且按着 shift 键 则勾选这一行
        if (this.currentRow.length > 0) {
          // 如果按住Shift键并且之前有选中的行，则进行区域选择
          const currentIndex = this.dataList.indexOf(this.lastSelectedRow);
          const start = Math.min(currentIndex, this.lastSelectedRowIndex);
          const end = Math.max(currentIndex, this.lastSelectedRowIndex);
          for (let i = start; i <= end; i++) {
            this.$refs.dataList.toggleRowSelection(this.dataList[i], true);
          }
        }
      } else if (this.lastSelectedRow && event.ctrlKey) {
        if (this.currentRow.length > 0) {
          // 如果按住ctrl键并且之前有选中的行，则进行区域选择取消
          const currentIndex = this.dataList.indexOf(this.lastSelectedRow);
          const start = Math.min(currentIndex, this.lastSelectedRowIndex);
          const end = Math.max(currentIndex, this.lastSelectedRowIndex);
          for (let i = start; i <= end; i++) {
            this.$refs.dataList.toggleRowSelection(this.dataList[i], false);
          }
        }
      } else {
        this.$refs.dataList.toggleRowSelection(row);
      }
    },