vxe-table区域选取

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的功能和灵活的配置选项，包括区域选取功能。

要在 vxe-table 中实现区域选取，需要使用其提供的 select-config 属性。通过设置 select-config.enable 来启用区域选取功能，设置 select-config.range 为 true 来开启区域选取的范围选择模式。

以下是一个简单的示例代码：

<template>
  <vxe-table
    :data="tableData"
    :select-config="{ enable: true, range: true }"
  >
    <vxe-table-column type="selection" width="60"></vxe-table-column>
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
    <vxe-table-column field="address" title="Address"></vxe-table-column>
  </vxe-table>
</template>

<script>
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Tom', age: 30, address: 'Los Angeles' },
        { name: 'Mary', age: 28, address: 'Chicago' },
        { name: 'Bob', age: 35, address: 'Houston' }
      ]
    }
  },
  mounted() {
    VXETable.setup({
      table: {}
    })
  }
}
</script>

在这个示例中，我们通过设置 select-config.enable 和 select-config.range 来启用区域选取功能，并使用 vxe-table-column 组件来定义表格列。当用户选择表格中的一个区域时，vxe-table 会触发 select-change 事件，您可以在事件处理程序中获取被选中的区域数据，然后进行相应的操作。