列表项目组

v-list-item-group 提供创建一组可选择的 v-list-item 的能力。v-list-item-group 组件利用其核心的 v-item-group 来为交互式列表提供一个简洁的接口。

用例

默认情况下，v-list-item-group 操作类似于 v-item-group 。如果没有提供 value ，则该群组将基于其索引提供默认值。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="500"
  5.   >
  6.     <v-list>
  7.       <v-list-item-group v-model="model">
  8.         <v-list-item
  9.           v-for="(item, i) in items"
  10.           :key="i"
  11.         >
  12.           <v-list-item-icon>
  13.             <v-icon v-text="item.icon"></v-icon>
  14.           </v-list-item-icon>
  15.           <v-list-item-content>
  16.             <v-list-item-title v-text="item.text"></v-list-item-title>
  17.           </v-list-item-content>
  18.         </v-list-item>
  19.       </v-list-item-group>
  20.     </v-list>
  21.   </v-card>
  22. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           icon: 'mdi-inbox',
  7.           text: 'Inbox',
  8.         },
  9.         {
  10.           icon: 'mdi-star',
  11.           text: 'Star',
  12.         },
  13.         {
  14.           icon: 'mdi-send',
  15.           text: 'Send',
  16.         },
  17.         {
  18.           icon: 'mdi-email-open',
  19.           text: 'Drafts',
  20.         },
  21.       ],
  22.       model: 1,
  23.     }),
  24.   }
  25. </script>

List item groups（列表项目组） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

List item groups（列表项目组） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="multiple" class="mx-2" label="Multiple"></v-switch>
  5.       <v-switch v-model="mandatory" class="mx-2" label="Mandatory"></v-switch>
  6.       <v-switch v-model="flat" class="mx-2" label="Flat"></v-switch>
  7.       <v-switch v-model="dense" class="mx-2" label="Dense"></v-switch>
  8.       <v-col cols="12">
  9.         <v-slider v-model="count" min="0" max="25" label="Items count"></v-slider>
  10.       </v-col>
  11.     </v-row>
  13.     <v-card
  14.       class="mx-auto"
  15.       max-width="400"
  16.     >
  17.       <v-list
  18.         :flat="flat"
  19.         :dense="dense"
  20.       >
  21.         <v-list-item-group
  22.           v-model="model"
  23.           :multiple="multiple"
  24.           :mandatory="mandatory"
  25.           color="indigo"
  26.         >
  27.           <v-list-item
  28.             v-for="i in count"
  29.             :key="i"
  30.           >
  31.             <v-list-item-icon>
  32.               <v-icon v-text="item.icon"></v-icon>
  33.             </v-list-item-icon>
  35.             <v-list-item-content>
  36.               <v-list-item-title v-text="item.text"></v-list-item-title>
  37.             </v-list-item-content>
  38.           </v-list-item>
  39.         </v-list-item-group>
  40.       </v-list>
  41.     </v-card>
  42.   </div>
  43. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: {
  5.         icon: 'mdi-wifi',
  6.         text: 'Wifi',
  7.       },
  8.       model: 1,
  9.       multiple: false,
  10.       mandatory: false,
  11.       flat: false,
  12.       dense: false,
  13.       count: 4,
  14.     }),
  15.   }
  16. </script>

List item groups（列表项目组） - 图3

示例

下面是一些简单到复杂的例子。

不加强调的选择

您可以轻松地禁用选定的 v-list-items 的默认高亮度。这将为用户的选择创建一个较低的配置文件。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-list flat>
  7.       <v-list-item-group v-model="model" color="indigo">
  8.         <v-list-item
  9.           v-for="(item, i) in items"
  10.           :key="i"
  11.         >
  12.           <v-list-item-icon>
  13.             <v-icon v-text="item.icon"></v-icon>
  14.           </v-list-item-icon>
  16.           <v-list-item-content>
  17.             <v-list-item-title v-text="item.text"></v-list-item-title>
  18.           </v-list-item-content>
  19.         </v-list-item>
  20.       </v-list-item-group>
  21.     </v-list>
  22.   </v-card>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           icon: 'mdi-wifi',
  7.           text: 'Wifi',
  8.         },
  9.         {
  10.           icon: 'mdi-bluetooth',
  11.           text: 'Bluetooth',
  12.         },
  13.         {
  14.           icon: 'mdi-chart-donut',
  15.           text: 'Data Usage',
  16.         },
  17.       ],
  18.       model: 1,
  19.     }),
  20.   }
  21. </script>

List item groups（列表项目组） - 图4

选择多个项目

您可以一次选择多个项目。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-list>
  7.       <v-list-item-group v-model="model" multiple color="indigo">
  8.         <v-list-item
  9.           v-for="(item, i) in items"
  10.           :key="i"
  11.         >
  12.           <v-list-item-icon>
  13.             <v-icon v-text="item.icon"></v-icon>
  14.           </v-list-item-icon>
  16.           <v-list-item-content>
  17.             <v-list-item-title v-text="item.text"></v-list-item-title>
  18.           </v-list-item-content>
  19.         </v-list-item>
  20.       </v-list-item-group>
  21.     </v-list>
  22.   </v-card>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           icon: 'mdi-wifi',
  7.           text: 'Wifi',
  8.         },
  9.         {
  10.           icon: 'mdi-bluetooth',
  11.           text: 'Bluetooth',
  12.         },
  13.         {
  14.           icon: 'mdi-chart-donut',
  15.           text: 'Data Usage',
  16.         },
  17.       ],
  18.       model: [1],
  19.     }),
  20.   }
  21. </script>

List item groups（列表项目组） - 图5

必填项

必须至少选定一项。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-list>
  7.       <v-list-item-group v-model="model" mandatory color="indigo">
  8.         <v-list-item
  9.           v-for="(item, i) in items"
  10.           :key="i"
  11.         >
  12.           <v-list-item-icon>
  13.             <v-icon v-text="item.icon"></v-icon>
  14.           </v-list-item-icon>
  16.           <v-list-item-content>
  17.             <v-list-item-title v-text="item.text"></v-list-item-title>
  18.           </v-list-item-content>
  19.         </v-list-item>
  20.       </v-list-item-group>
  21.     </v-list>
  22.   </v-card>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           icon: 'mdi-wifi',
  7.           text: 'Wifi',
  8.         },
  9.         {
  10.           icon: 'mdi-bluetooth',
  11.           text: 'Bluetooth',
  12.         },
  13.         {
  14.           icon: 'mdi-chart-donut',
  15.           text: 'Data Usage',
  16.         },
  17.       ],
  18.       model: 1,
  19.     }),
  20.   }
  21. </script>

List item groups（列表项目组） - 图6

Alpha Theme

Complete theme experience including enhanced Vue CLI, full documentation, 5 custom components and much more!

ads by Vuetify

](https://store.vuetifyjs.com/product/alpha-theme?ref=vuetifyjs.com)

自定义活动类

您可以设置一个在选择项目时将添加的类。

template script style

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-list>
  7.       <v-list-item-group v-model="model" active-class="border" color="indigo">
  8.         <v-list-item
  9.           v-for="(item, i) in items"
  10.           :key="i"
  11.         >
  12.           <v-list-item-icon>
  13.             <v-icon v-text="item.icon"></v-icon>
  14.           </v-list-item-icon>
  16.           <v-list-item-content>
  17.             <v-list-item-title v-text="item.text"></v-list-item-title>
  18.           </v-list-item-content>
  19.         </v-list-item>
  20.       </v-list-item-group>
  21.     </v-list>
  22.   </v-card>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           icon: 'mdi-wifi',
  7.           text: 'Wifi',
  8.         },
  9.         {
  10.           icon: 'mdi-bluetooth',
  11.           text: 'Bluetooth',
  12.         },
  13.         {
  14.           icon: 'mdi-chart-donut',
  15.           text: 'Data Usage',
  16.         },
  17.       ],
  18.       model: 1,
  19.     }),
  20.   }
  21. </script>
  1. <style scoped>
  2. .border {
  3.   border: 2px dashed orange;
  4. }
  5. </style>

List item groups（列表项目组） - 图7

选择控件

使用默认插槽，可以访问项的内部状态并切换它。由于 active 属性是一个 _boolean_，我们使用复选框上的 true-value 属性将其状态绑定到 v-list-item。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="500"
  5.   >
  6.     <v-list shaped>
  7.       <v-list-item-group
  8.         v-model="model"
  9.         multiple
  10.       >
  11.         <template v-for="(item, i) in items">
  12.           <v-divider
  13.             v-if="!item"
  14.             :key="`divider-${i}`"
  15.           ></v-divider>
  17.           <v-list-item
  18.             v-else
  19.             :key="`item-${i}`"
  20.             :value="item"
  21.             active-class="deep-purple--text text--accent-4"
  22.           >
  23.             <template v-slot:default="{ active, toggle }">
  24.               <v-list-item-content>
  25.                 <v-list-item-title v-text="item"></v-list-item-title>
  26.               </v-list-item-content>
  28.               <v-list-item-action>
  29.                 <v-checkbox
  30.                   :input-value="active"
  31.                   :true-value="item"
  32.                   color="deep-purple accent-4"
  33.                   @click="toggle"
  34.                 ></v-checkbox>
  35.               </v-list-item-action>
  36.             </template>
  37.           </v-list-item>
  38.         </template>
  39.       </v-list-item-group>
  40.     </v-list>
  41.   </v-card>
  42. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         'Dog Photos',
  6.         'Cat Photos',
  7.         '',
  8.         'Potatoes',
  9.         'Carrots',
  10.       ],
  11.       model: ['Carrots'],
  12.     }),
  13.   }
  14. </script>

List item groups（列表项目组） - 图8