插件名称 | vue-gridmultiselect |
---|---|
发布时间 | 2020年4月17日 |
插件作者 | ProticM |
GridMultiselect Vue.js组件提供了一个用户友好的界面,可以从可搜索和可分组的列表中选择多个选项。
2020/06/18
# 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
}