vxe-table多选下拉

为了实现vxe-table的多选下拉功能，需要使用vxe-table-plugin-menus插件。以下是一个实现vxe-table多选下拉的例子：

<template>
  <vxe-table
    ref="xTable"
    :data="tableData"
    :columns="columns"
    :checkbox-config="{ range: true }"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
    :toolbar="toolbar"
    @checkbox-range-change="handleCheckboxRangeChange"
  ></vxe-table>
</template>

<script>
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import menusPlugin from 'vxe-table-plugin-menus'

export default {
  name: 'vxeTableDemo',
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', checked: false },
        { id: 2, name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', checked: false },
        { id: 3, name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', checked: false },
        { id: 4, name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', checked: false }
      ],
      columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 120 },
        { field: 'age', title: 'Age', width: 80 },
        { field: 'address', title: 'Address', width: 220 },
        { field: 'checked', title: 'Checked', width: 100, type: 'checkbox' }
      ],
      toolbar: {
        menus: [
          {
            id: 'menu1',
            title: 'Select All',
            visibleMethod({ $table }) {
              return $table && $table.getCheckboxRecords().length < $table.tableData.length
            },
            clickMethod({ $table }) {
              $table.setCheckboxRow({ checked: true })
            }
          },
          {
            id: 'menu2',
            title: 'Unselect All',
            visibleMethod({ $table }) {
              return $table && $table.getCheckboxRecords().length > 0
            },
            clickMethod({ $table }) {
              $table.clearCheckboxRow()
            }
          }
        ]
      }
    }
  },
  mounted() {
    VXETable.use(menusPlugin)
    this.$refs.xTable.load()
  },
  methods: {
    handleCheckboxRangeChange({ records }) {
      console.log(records)
    }
  }
}
</script>

在这个例子中，我们使用了vxe-table-plugin-menus插件来实现多选下拉功能。我们还使用了checkbox-config属性来启用多选框，并使用checkbox-range-change事件来获取所选数据。我们还使用了toolbar属性来添加两个菜单项，以便全选和取消全选。