el-table如何实现鼠标拖动范围多选

要实现鼠标拖动范围多选功能，可以借助 Element UI 提供的 el-table 组件提供的 selection-change 事件和 table 的 ref 属性进行操作。

以下是具体实现步骤：

1. 在 el-table 上添加 ref 属性，并绑定一个名称，方便在 JavaScript 中获取到它的实例。

2. 监听 el-table 的 selection-change 事件，该事件会在用户选择/取消选择表格中的行时触发。可以在事件处理程序中实现“范围多选”逻辑。

3. 在事件处理程序中，可以通过 $refs 来获取到 el-table 的实例，并调用实例的 toggleRowSelection 方法来实现行的选择/取消选择操作。该方法接受两个参数：当前行的数据和是否选中的标志。

4. 获取鼠标拖动的范围，遍历区域内所有的行，并通过 toggleRowSelection 方法来实现多选。

以下是一个简单的实现示例：

<template>
  <el-table
    :data="tableData"
    ref="table"
    @selection-change="handleSelectionChange"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
  >
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京' },
        { name: '李四', age: 20, address: '上海' },
        { name: '王五', age: 22, address: '广州' },
        { name: '赵六', age: 24, address: '深圳' }
      ],
      isDragging: false,
      startRowIndex: -1,
      endRowIndex: -1
    }
  },
  methods: {
    handleSelectionChange(rows) {
      console.log(rows)
    },
    handleMouseDown(event) {
      const table = this.$refs.table
      const cell = event.target.closest('td')
      if (cell) {
        const rowIndex = cell.parentNode.rowIndex - 1
        if (event.ctrlKey) {
          // 如果按下了 Ctrl 键，则不会清除之前选中的行，仅仅添加新的选择
          this.isDragging = true
        } else {
          // 如果没有按下 Ctrl 键，则清空之前选中的行，只保留当前选择的行
          table.clearSelection()
          table.toggleRowSelection(this.tableData[rowIndex], true)
        }
        this.startRowIndex = rowIndex
        this.endRowIndex = rowIndex
      }
    },
    handleMouseMove(event) {
      if (this.isDragging) {
        const table = this.$refs.table
        const cell = event.target.closest('td')
        if (cell) {
          const rowIndex = cell.parentNode.rowIndex - 1
          this.endRowIndex = rowIndex
          const start = Math.min(this.startRowIndex, this.endRowIndex)
          const end = Math.max(this.startRowIndex, this.endRowIndex)
          for (let i = start; i <= end; i++) {
            table.toggleRowSelection(this.tableData[i], true)
          }
        }
      }
    },
    handleMouseUp() {
      this.isDragging = false
    }
  }
}
</script>

在上面的示例代码中，我们通过添加 @mousedown、@mousemove 和 @mouseup 事件来实现鼠标拖动范围多选功能。当用户在表格中按下鼠标左键时，会触发 @mousedown 事件，我们在事件处理程序中记录开始的行索引，并判断是否按下了 Ctrl 键，如果按下了 Ctrl 键，则不清除之前选中的行，仅仅添加新的选择。

当用户移动鼠标时，会触发 @mousemove 事件，在事件处理程序中记录结束的行索引，然后计算要选中的行范围，并遍历区域内所有的行，通过 toggleRowSelection 方法来实现多选。

当用户松开鼠标时，会触发 @mouseup 事件，我们在事件处理程序中标记鼠标不再处于拖动状态。