vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能

最新推荐文章于 2025-09-10 03:33:04 发布

原创

最新推荐文章于 2025-09-10 03:33:04 发布 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vxe-table

vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能

查看官网：https://vxetable.cn

效果

在这里插入图片描述

代码

通过 checkbox-config.isShift 启用批量选中,启用后按住快捷键和鼠标批量选取

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

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

const gridOptions = reactive({
     
     
  border: true,
  height: 500,
  columnConfig: {
     
     
    resizable: true
  },
  rowConfig: {
     
     
    isHover: true
  },
  checkboxConfig: {
     
     
    labelField: 'name',
    highlight: true,
    isShiftKey: true
  },
  columns: [