vue vxe-table 表格中实现多选框，通过鼠标滑动范围勾选功能

官网文档：vxetable.cn

vxe-table 是一个国产开源的非常强大的表格组件，在表格中表格中实现多选框，通过鼠标滑动范围勾选功能，默认情况是是通过鼠标点击多选框进行勾选的，用户说这操作起来不方便，希望像 excel 那样，能用鼠标滑动选取，看了官网文档，发现本来就是支持这个功能的。

效果

支持鼠标点击勾选 支持单次滑动选择/取消 支持按 Ctrl + 鼠标，局部的滑动选择/取消

这样就相当完美了

代码

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

<script>
export default {
  data () {
    const gridOptions = {
      border: true,
      height: 500,
      columnConfig: {
        resizable: true
      },
      rowConfig: {
        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' }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

还有更强的扩展插件

查看 github github.com/x-extends/v…

查看 gitee gitee.com/xuliangzhan…