vue-multiselect Option groups 下拉选项分组

Option groups将下拉选项进行分门别类方便用户更好的选择，通过group-label, group-values 和 group-select等属性来实现。

关键属性

属性名称	说明
group-values	分组数据 group-values="data"
group-label	分组名称对应options的那个属性
group-select	设置为true时，可以整个组一次性选中,false只能一个一个选中

完整代码

<template>
 <div style="width:50%;margin-left: 10px;">
  <multiselect
   v-model="value"
  :options="options" 
  :multiple="true" 
  group-values="data"
  group-label="groupname" 
  :group-select="false" 
   placeholder="分类选择"
   track-by="id" 
   label="name"
   selectLabel="回车选择"
   selectGroupLabel="回车选择整个分组"
   selectedLabel="已选择"
   deselectLabel="回车取消选择"
   deselectGroupLabel="回车取消选择"
   >
  <span slot="noResult">未筛选到相关数据</span>
  </multiselect>
  <pre  ><code>{{ value  }}</code></pre>
</div>
</template> 
 <script> 
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)
 export default {
  components: {
    Multiselect
  },
  data () {
    return {
      options: [
        {
          groupname: '水果',
          data: [
            { name: '苹果', id: '1000' },
            { name: '香蕉', id: '1001' }
          ]
        },
        {
          groupname: '饮料',
          data: [
            { name: '可口可乐', id: '1000' },
            { name: '百事可乐', id: '1000' }
          ]
        }
      ],
      value: []
    }
  }
}
</script>

例子