vue-multiselect 教程
vue-multiselect属性列表
vue-multiselect属性列表
multiselectMixin.js
| 属性名称 | 类型 | 描述 | |
|---|---|---|---|
| id | Integer||String | 组件唯一ID | |
| options | Array | 下拉选项数组，可以是['a选项','b选项'] 也可以是[{label:'a选项',value:100},{label:'b选项',value:200}] | |
| value | Object | 选中下拉选项的对象 Object||Array||String||Integer | |
| multiple | Boolean | 是否允许多选，默认false | |
| trackBy | String | [{name:'a选项',value:100},{name:'b选项',value:100}] 下拉选项options为以上数组时，可以设置name为trackBy 因为value有相同的值，无法作为key | |
| label | String | [{name:'a选项',value:100},{name:'b选项',value:100}] 将这个数组那个属性作为显示字段给用户看 | |
| searchable | Boolean | true | 是否允许筛选 |
| clearOnSelect | Boolean | true | 当设置multiple为true多选时， 选中后是否清除用户输入的关键词 |
| hideSelected | Boolean | false | 是否隐藏已选中项 |
| placeholder | String | '' | 占位提示文本，比如请选择省份 |
| allowEmpty | Boolean | true | 是否允许清空所有选中项 |
| resetAfter | Boolean | false | Reset this.value, this.search, this.selected after this.value changes. |
| closeOnSelect | Boolean | true | 选择后是否关闭下拉选项，多选时应该设置 true这样方便再次选择 |
| customLabel | Function => String | 自定义下拉项目显示的文本 | |
| taggable | Boolean | false | 是否允许用户输入的关键词作为选项 |
| tagPlaceholder | String | 'Press enter to create a tag' 回车添加标签（taggable为true时） | |
| tagPosition | String | 默认'top'，用户输入的标签添加到下拉项的头部或者尾部 bottom | |
| max | Number | 允许最多选择多少个选项 | |
| optionsLimit | Number | 最多显示多少给选项，比如数组有100个选项 设置为5，那么用户最多一屏看到5个其他的要滚动滚动条 | |
| groupValues | String | 对下拉选项进行分组，具体用法请，点此连接查看 | |
| groupLabel | String | ||
| groupSelect | Boolean | ||
| blockKeys | Array | [] | Array of keyboard key aliases to block when selecting |
| internalSearch | Boolean | true | 客户端筛选，远程AJAX筛选时请把此项设置为false 点击查看ajax筛选用法 |
| preserveSearch | Boolean | false | 如果设置为true，则在打开/关闭组件时将保留搜索查询。 |
| preselectFirst | Boolean | false | 如果初始值为空，则选择第一个选项 |
Multiselect.vue
| 属性名称 | 类型 | 描述 |
|---|---|---|
| name | String | Name attribute to match optional label element |
| selectLabel | String | 'Press enter to select' 回车选中 |
| selectGroupLabel | String | 'Press enter to select group' 按回车键选择组 |
| selectedLabel | String | 'Selected'已选择 |
| deselectLabel | String | 'Press enter to remove'回车取消选择 |
| deselectGroupLabel | String | 'Press enter to deselect group'回车取消选择组 |
| showLabels | Boolean | true 决定是否在突出显示的选项上显示标签 |
| limit | Number | 当:multiple="true"多选时，允许显示多个选中项目，其余的显示更多 |
| limitText | Function => String | 超过limit设置的数量时，显示什么文字说明，点击参考 |
| loading | Boolean | ajax筛选搜索时是否显示加载动画，默认为false |
| disabled | Boolean | 组件是否可用，默认true |
| maxHeight | Integer | 下拉选项弹出层最大高度，默认300px |
| openDirection | String | 下拉选项弹出层位置"above"/"top" or "below"/"bottom" |
| showNoResults | Boolean | 搜索无结果时，是否显示“无结果”提示 |
| tabindex | Number | 组件的tab键顺序 |
| optionHeight | Number | 下拉项每项的高度 |