Vuetify上有选项组吗？

Question

我想在vuetify上放一个option group（像这样的）select。

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

Answer 1

似乎 vuetify 现在本身就提供了这个功能。查看 vuetify doku 的示例模型：

因此，您必须仅在所需位置为数组 'items' 提供一个对象。

例子 {'header': 'Mitarbeiter'}

Answer 2

您可以执行此操作，以添加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' }
      ]
  })

密码笔