用 vxe-table 实现 多选下拉表格

1. 安装 vxe-table

npm install vxe-table --save

2. 在 Vue 项目中引用 vxe-table

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

3. 在 Vue 模板中使用 vxe-table

<vxe-table :data="tableData" checkbox-config="{range: true}">
    <vxe-table-column type="selection" width="60"></vxe-table-column>
    <vxe-table-column field="name" title="姓名"></vxe-table-column>
    <vxe-table-column field="age" title="年龄"></vxe-table-column>
    <vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>

4. 在 Vue 实例中定义数据

export default {
    data() {
        return {
            tableData: [
                { name: '张三', age: 20, address: '北京市' },
                { name: '李四', age: 30, address: '上海市' },
                { name: '王五', age: 40, address: '广州市' },
                { name: '赵六', age: 50, address: '深圳市' }
            ]
        }
    }
}

5. 使用多选下拉框

<template>
  <div>
    <vxe-dropdown ref="dropdown" v-model="value" :options="options" multiple>
      <template #option="{ option, $index }">
        <vxe-checkbox :label="option.value" :content="option.label" :indeterminate="option.indeterminate" :checked="option.checked" @change="handleChange($event, option)"></vxe-checkbox>
      </template>
    </vxe-dropdown>
    <vxe-table :data="tableData" checkbox-config="{range: true}" ref="table">
      <vxe-table-column type="selection" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="age" title="年龄"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

export default {
    data() {
        return {
            options: [
                { label: '张三', value: '1' },
                { label: '李四', value: '2' },
                { label: '王五', value: '3' },
                { label: '赵六', value: '4' },
            ],
            value: ['1', '2'],
            tableData: [
                { name: '张三', age: 20, address: '北京市' },
                { name: '李四', age: 30, address: '上海市' },
                { name: '王五', age: 40, address: '广州市' },
                { name: '赵六', age: 50, address: '深圳市' }
            ]
        }
    },
    methods: {
      handleChange (checked, option) {
        if (checked) {
          this.value.push(option.value)
        } else {
          const index = this.value.indexOf(option.value)
          if (index > -1) {
            this.value.splice(index, 1)
          }
        }
      }
    }
}