vue 表格组件 vxe-table 开源版：鼠标滑动选择多行

在数据批量操作场景中，逐行点击复选框效率低下。vxe-table 开源版本提供了范围选中能力：按住复选框列并向上或向下滑动，即可连续选中多行，操作方式类似 Excel 的拖拽填充，大幅提升批量选择效率。

功能概述

• 范围选中：通过 checkboxConfig.range 启用，鼠标按住复选框列拖动即可连续选中。
• 向上/向下滑动：支持从起始行向上或向下扩展选择范围。
• 事件回调：提供 checkboxRangeStart 与 checkboxRangeEnd 事件，便于统计选择结果或执行后续逻辑。
• 悬停高亮：配合 rowConfig.isHover 与 checkboxConfig.highlight 提升交互体验。

限制：该功能不支持 treeConfig 树形模式。

核心配置

启用范围选中

checkboxConfig: {
  range: true,        // 启用范围选中
  labelField: 'name', // 复选框列的标题字段
  highlight: true     // 选中行高亮
}

• range：总开关，启用后按住复选框列拖动即可连续选中。
• labelField：指定某一字段作为复选框的标签显示。
• highlight：选中行高亮显示。

行主键与悬停

rowConfig: {
  keyField: 'id',   // 行主键，必须唯一
  isHover: true     // 鼠标悬停高亮
}

• keyField 用于唯一标识每一行，范围选择依赖它来追踪选中状态。
• isHover 提升鼠标操作时的视觉反馈。

复选框列

columns: [
  { type: 'checkbox', title: 'Name' },
  // ...
]

• type: 'checkbox' 定义复选框列。
• 范围选择的拖拽操作从该列开始。

代码

<template>
  <div>
    <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  border: true,
  height: 500,
  columnConfig: {
    resizable: true
  },
  rowConfig: {
    keyField: 'id',
    isHover: true
  },
  checkboxConfig: {
    labelField: 'name',
    highlight: true,
    range: true
  },
  columns: [
    { type: 'checkbox', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address', showOverflow: true }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
    { id: 10007, name: 'Test7', role: 'PM', sex: 'Women', age: 38, address: 'Shanghai' },
    { id: 10008, name: 'Test8', role: 'Designer', sex: 'Man', age: 24, address: 'test abc' },
    { id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 35, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Women', age: 31, address: 'Shanghai' },
    { id: 10011, name: 'Test11', role: 'PM', sex: 'Women', age: 45, address: 'Shanghai' },
    { id: 10012, name: 'Test12', role: 'Test', sex: 'Man', age: 39, address: 'Guangzhou' },
    { id: 10013, name: 'Test13', role: 'Develop', sex: 'Women', age: 38, address: 'Shanghai' }
  ]
})

const gridEvents = {
  checkboxRangeStart() {
    console.log('开始拖拽选择')
  },
  checkboxRangeEnd({ records }) {
    const $grid = gridRef.value
    if ($grid) {
      console.log('结束拖拽选择', records.length)
    }
  }
}
</script>

其他相关

事件回调

• checkbox-range-start：拖拽开始时触发，可用于禁用其他交互或显示提示。
• checkbox-range-end：拖拽结束时触发，参数 records 为本次选中的所有行数据，便于统计或提交。

### 获取选中数据

除了事件回调，也可通过表格方法获取当前选中行：

```javascript
const $grid = gridRef.value
const checkedRecords = $grid.getCheckboxRecords() // 获取所有选中行

通过 checkboxConfig.range 一行配置，vxe-table 即可实现鼠标滑动多行选择，配合 checkboxRangeStart / checkboxRangeEnd 事件，可轻松完成批量选择与后续处理。对于需要高效批量操作的表格场景，这是一个非常实用的能力。

https://vxetable.cn