vxe-table实现多选

要在vxe-table中实现多选，可以在列定义中使用`type: 'checkbox'`来定义一个多选列，然后在表格的头部和每一行中显示多选框。在表格中选中的行将会被添加到一个名为`$refs.table.getCheckboxRecords()`的数组中。

以下是一个示例代码：

<template>
  <div>
    <vxe-table ref="table" :data="tableData" :columns="columns">
      <template #toolbar>
        <div>
          <button @click="handleDelete">删除选中行</button>
        </div>
      </template>
      <template #checkbox="params">
        <input type="checkbox" :checked="params.row._checked" @change="handleCheckboxChange(params.row)">
      </template>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
      ],
      columns: [
        { type: 'checkbox', width: 60, align: 'center' },
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: '姓名' },
      ],
      selectedRows: []
    }
  },
  methods: {
    handleCheckboxChange(row) {
      row._checked = !row._checked
      this.selectedRows = this.$refs.table.getCheckboxRecords()
    },
    handleDelete() {
      const ids = this.selectedRows.map(row => row.id)
      this.tableData = this.tableData.filter(row => !ids.includes(row.id))
      this.selectedRows = []
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为`selectedRows`的数组，用于存储选中的行。在表格的列定义中，我们使用`type: 'checkbox'`来定义一个多选列，并使用`template #checkbox`来定义多选框的显示样式。在多选框的`@change`事件中，我们将选中状态存储到行的`_checked`属性中，并调用`this.$refs.table.getCheckboxRecords()`获取选中的行。在删除选中行的按钮的点击事件中，我们先获取选中行的ID，然后使用`filter`方法从数据中删除被选中的行。最后，我们清空`selectedRows`数组。