GridMultiselect Vue.js组件提供了一个用户友好的界面，可以从可搜索和可分组的列表中选择多个选项。

变更日志：

2020/06/18

• 1.2.2版

安装和下载：

# NPM
$ npm install vue-gridmultiselect --save

使用：

1.将Vue＆Vue GridMultiselect导入应用程序。

import GridMultiSelect from 'vue-gridmultiselect';
import 'vue-gridmultiselect/dist/vue-gridmultiselect.css';

2.注册组件并定义选项，如下所示：

export default {
  name: "example",
  components: { GridMultiSelect },
  data() {
    return {
    selectedItems: null,
      items: [
        { id: 1, name: "San Francisco" },
        { id: 2, name: "Las Vegas" },
        { id: 3, name: "Washington" },
        { id: 4, name: "Munich" },
        { id: 5, name: "Berlin" },
        { id: 6, name: "Rome" }
      ]
    };
  }
};

3.在模板中创建GridMultiSelect组件。

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  item-label="name" 
  v-model="selectedItems" 
/>

4.默认props。

title: {
  type: String,
  default: "Grid Multiselect"
},
itemLabel: {
  value: [String, Array],
  required: true
},
itemKey: {
  type: String,
  required: true
},
items: {
  type: Array,
  default: () => []
},
value: {
  type: Array,
  default: () => []
},
searchable: {
  type: Boolean,
  default: true
},
emptyMessage: {
  type: String,
  default: "No Data"
},
groupBy: {
  type: String
},
itemDetails: {
  type: String
}

---

官网：https://github.com/ProticM/vue-gridmultiselect

演示：https://www.vue365.cn/code_demo.php?id=248

GitHub下载：https://github.com/ProticM/vue-gridmultiselect/archive/master.zip