element复选框表格，实现shift多选_列表复选款shift 按键多选-CSDN博客

本文链接：https://blog.csdn.net/taoqidexiaojie/article/details/135554240

需求：对表格数据进行批量处理的时候，即使有复选框但是也得需要一个一个选。有点麻烦。

解决：点击一行之后摁住shift，再选择另一个，两条数据之间的则为选中

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <!-- 省略表格列的定义 -->
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      lastSelectedRow: null, // 上一次选中的行
      selectedRow: null // 当前选中的行
    }
  },
  methods: {
    handleRowClick(row,column, event) {
      this.lastSelectedRow = this.selectedRow // 记录上一次选中的行
      this.selectedRow = selection[0] // 记录当前选中的行
      if (this.lastSelectedRow && event.shiftKey) {
        // Shift 键按下，选中中间的行
        const startIndex = this.tableData.indexOf(this.lastSelectedRow)
        const endIndex = this.tableData.indexOf(row)
        const [start, end] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex]
        for (let i = start + 1; i < end; i++) {
          this.$refs.table.toggleRowSelection(this.tableData[i], true)
        }
      } else {
        // Shift 键未按下，正常选中/取消选中一行
        this.$refs.table.toggleRowSelection(row)
      }
    }
  }
}
</script>

这个还有一个问题。就是页面上的文字则会被选中。这个可以用css更改

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* 标准语法 */
}