vuetify.js - Vuetify 上有选项组吗？

Question

我想要一个 option group (如 this )在 vuetify select 上.

那可能吗？如果是，我该怎么做？

Answer 1

过时 :请参阅下面的@DevNik 答案以了解正确实现

您可以添加 divider在您选择的数据中并使用 template更好地控制您的选择显示数据的方式。
像这样 :
HTML

<v-select
    v-model="peopleSelected"
    :items="people"
    box
    chips
    color="blue-grey lighten-2"
    label="Select"
    item-text="name"
    item-value="name"
    multiple
  >
    <!-- Template for render selected data -->
    <template
      slot="selection"
      slot-scope="data"
    >
      <v-chip
        :selected="data.selected"
        close
        class="chip--select-multi"
        @input="remove(data.item)"
      >
        {{ data.item.name }}
      </v-chip>
    </template>
    <!-- Template for render data when the select is expanded -->
    <template
      slot="item"
      slot-scope="data"
    >
      <!-- Divider and Header-->
      <template v-if="typeof data.item !== 'object'">
        <v-list-tile-content v-text="data.item"/>
      </template>
      <!-- Normal item -->
      <template v-else>
        <v-list-tile-content>
          <v-list-tile-title v-html="data.item.name"/>
          <v-list-tile-sub-title v-html="data.item.group"/>
        </v-list-tile-content>
      </template>
    </template>
  </v-select>

数据

data: () => ({
    peopleSelected:[],
    people: [
        { header: 'Group 1' },
        { name: 'Sandra Adams', group: 'Group 1' },
        { name: 'Ali Connors', group: 'Group 1' },
        { name: 'Trevor Hansen', group: 'Group 1' },
        { name: 'Tucker Smith', group: 'Group 1'},
        { divider: true },
        { header: 'Group 2' },
        { name: 'Britta Holt', group: 'Group 2'},
        { name: 'Jane Smith ', group: 'Group 2'},
        { name: 'John Smith', group: 'Group 2' },
        { name: 'Sandra Williams', group: 'Group 2' }
      ]
  })

CodePen