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

我想在vuetify option group上有一个select（如this）。

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

最佳答案

您可以在选择的数据中添加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