树形视图

v-treeview 组件对于显示大量嵌套数据很有用。

用例

一个基本示例

template script

  1. <template>
  2.   <v-treeview :items="items"></v-treeview>
  3. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图1

API

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

Treeview（树形视图） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="dense" label="Dense"></v-switch>
  5.       <v-switch v-model="selectable" label="Selectable"></v-switch>
  6.       <v-switch v-model="activatable" label="Activatable"></v-switch>
  7.       <v-switch v-model="hoverable" label="Hoverable"></v-switch>
  8.       <v-switch v-model="shaped" label="Shaped"></v-switch>
  9.       <v-switch v-model="rounded" label="Rounded"></v-switch>
  10.       <v-switch v-model="openOnClick" label="Open on any item click"></v-switch>
  11.       <v-col cols="12">
  12.         <v-select v-model="selectedColor" :items="selectedColors" :disabled="!selectable" label="Selected checkbox color"></v-select>
  13.       </v-col>
  14.       <v-col cols="12">
  15.         <v-select v-model="color" :items="selectedColors" :disabled="!activatable" label="Active node color"></v-select>
  16.       </v-col>
  17.     </v-row>
  19.     <v-treeview
  20.       :items="items"
  21.       :dense="dense"
  22.       :selectable="selectable"
  23.       :activatable="activatable"
  24.       :hoverable="hoverable"
  25.       :open-on-click="openOnClick"
  26.       :selected-color="selectedColor"
  27.       :color="color"
  28.       :shaped="shaped"
  29.       :rounded="rounded"
  30.     ></v-treeview>
  31.   </div>
  32. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.       dense: false,
  77.       selectable: false,
  78.       activatable: false,
  79.       hoverable: false,
  80.       openOnClick: false,
  81.       shaped: false,
  82.       rounded: false,
  83.       color: 'primary',
  84.       selectedColor: 'accent',
  85.       selectedColors: [
  86.         'accent',
  87.         'teal',
  88.         'red',
  89.         'success',
  90.         'warning lighten-2',
  91.       ],
  92.     }),
  93.   }
  94. </script>

Treeview（树形视图） - 图3

示例

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

密度模式

密集模式提供了更紧凑的布局，同时降低了项目的高度。

template script

  1. <template>
  2.   <v-treeview
  3.     dense
  4.     :items="items"
  5.   ></v-treeview>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图4

复选框颜色

您可以控制所选节点复选框的颜色。

template script

  1. <template>
  2.   <v-treeview
  3.     selectable
  4.     selected-color="red"
  5.     :items="items"
  6.   ></v-treeview>
  7. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图5

颜色

您可以控制活动的树形视图节点的文本和背景颜色。

template script

  1. <template>
  2.   <v-treeview
  3.     activatable
  4.     color="warning"
  5.     :items="items"
  6.   ></v-treeview>
  7. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图6

形状

形状的树形视图在节点的一侧具有圆形边界。

template script

  1. <template>
  2.   <v-treeview
  3.     shaped
  4.     hoverable
  5.     activatable
  6.     :items="items"
  7.   ></v-treeview>
  8. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图7

圆角

您可以使树视图节点变成圆角。

template script

  1. <template>
  2.   <v-treeview
  3.     rounded
  4.     hoverable
  5.     activatable
  6.     :items="items"
  7.   ></v-treeview>
  8. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图8

停用节点

设置 item-disabled 属性可当设置为 true 时，以控制哪个节点的属性会禁用该节点。

template script

  1. <template>
  2.   <v-treeview
  3.     selectable
  4.     item-disabled="locked"
  5.     :items="items"
  6.   ></v-treeview>
  7. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           locked: true,
  9.           children: [
  10.             { id: 2, name: 'Calendar : app' },
  11.             { id: 3, name: 'Chrome : app' },
  12.             { id: 4, name: 'Webstorm : app' },
  13.           ],
  14.         },
  15.         {
  16.           id: 5,
  17.           name: 'Documents :',
  18.           children: [
  19.             {
  20.               id: 6,
  21.               name: 'vuetify :',
  22.               children: [
  23.                 {
  24.                   id: 7,
  25.                   name: 'src :',
  26.                   locked: true,
  27.                   children: [
  28.                     { id: 8, name: 'index : ts' },
  29.                     { id: 9, name: 'bootstrap : ts' },
  30.                   ],
  31.                 },
  32.               ],
  33.             },
  34.             {
  35.               id: 10,
  36.               name: 'material2 :',
  37.               children: [
  38.                 {
  39.                   id: 11,
  40.                   name: 'src :',
  41.                   children: [
  42.                     { id: 12, name: 'v-btn : ts' },
  43.                     { id: 13, name: 'v-card : ts' },
  44.                     { id: 14, name: 'v-window : ts' },
  45.                   ],
  46.                 },
  47.               ],
  48.             },
  49.           ],
  50.         },
  51.         {
  52.           id: 15,
  53.           name: 'Downloads :',
  54.           children: [
  55.             { id: 16, name: 'October : pdf', locked: true },
  56.             { id: 17, name: 'November : pdf', locked: true },
  57.             { id: 18, name: 'Tutorial : html', locked: true },
  58.           ],
  59.         },
  60.         {
  61.           id: 19,
  62.           name: 'Videos :',
  63.           children: [
  64.             {
  65.               id: 20,
  66.               name: 'Tutorials :',
  67.               children: [
  68.                 { id: 21, name: 'Basic layouts : mp4' },
  69.                 { id: 22, name: 'Advanced techniques : mp4' },
  70.                 { id: 23, name: 'All about app : dir' },
  71.               ],
  72.             },
  73.             { id: 24, name: 'Intro : mov' },
  74.             { id: 25, name: 'Conference introduction : avi' },
  75.           ],
  76.         },
  77.       ],
  78.     }),
  79.   }
  80. </script>

Treeview（树形视图） - 图9

选择类型

树形视图现在支持两种不同的选择类型。 默认类型是 ‘leaf’，它仅在 v-model 数组中包括叶节点，但会将父节点呈现为部分或完全选择状态。 另一种模式是 ‘independent’，它允许选择一个父节点，但是每个节点都独立于其父节点和子节点。

template script

  1. <template>
  2.   <v-container>
  3.     <v-select v-model="selectionType" :items="['leaf', 'independent']" label="Selection type"></v-select>
  4.     <v-row>
  5.       <v-col>
  6.         <v-treeview
  7.           v-model="selection"
  8.           :items="items"
  9.           :selection-type="selectionType"
  10.           selectable
  11.           return-object
  12.           open-all
  13.         ></v-treeview>
  14.       </v-col>
  15.       <v-divider vertical></v-divider>
  16.       <v-col class="pa-6" cols="6">
  17.         <template v-if="!selection.length">
  18.           No nodes selected.
  19.         </template>
  20.         <template v-else>
  21.           <div v-for="node in selection" :key="node.id">
  22.             {{ node.name }}
  23.           </div>
  24.         </template>
  25.       </v-col>
  26.     </v-row>
  28.   </v-container>
  29. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       selectionType: 'leaf',
  5.       selection: [],
  6.       items: [
  7.         {
  8.           id: 1,
  9.           name: 'Root',
  10.           children: [
  11.             { id: 2, name: 'Child #1' },
  12.             { id: 3, name: 'Child #2' },
  13.             {
  14.               id: 4,
  15.               name: 'Child #3',
  16.               children: [
  17.                 { id: 5, name: 'Grandchild #1' },
  18.                 { id: 6, name: 'Grandchild #2' },
  19.               ],
  20.             },
  21.           ],
  22.         },
  23.       ],
  24.     }),
  25.   }
  26. </script>

Treeview（树形视图） - 图10

可选择

您可以轻松选择树形视图节点和子节点。

template script

  1. <template>
  2.   <v-treeview
  3.     selectable
  4.     :items="items"
  5.   ></v-treeview>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图11

Consulting Support

Utilize John’s in-demand services for guidance and advice on advanced implementations and best practices or in-depth training for your project’s developers.

ads by Vuetify

]($e3ec2117d5271cd0.md)

可激活

树形视图节点可以将其激活。

template script

  1. <template>
  2.   <v-treeview
  3.     activatable
  4.     :items="items"
  5.   ></v-treeview>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图12

可悬停的

树形视图节点可以具有悬停效果。

template script

  1. <template>
  2.   <v-treeview
  3.     hoverable
  4.     :items="items"
  5.   ></v-treeview>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图13

打开所有

树形视图节点可以在页面加载时预先打开。

template script

  1. <template>
  2.   <v-treeview
  3.     open-all
  4.     :items="items"
  5.   ></v-treeview>
  6. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Applications :',
  8.           children: [
  9.             { id: 2, name: 'Calendar : app' },
  10.             { id: 3, name: 'Chrome : app' },
  11.             { id: 4, name: 'Webstorm : app' },
  12.           ],
  13.         },
  14.         {
  15.           id: 5,
  16.           name: 'Documents :',
  17.           children: [
  18.             {
  19.               id: 6,
  20.               name: 'vuetify :',
  21.               children: [
  22.                 {
  23.                   id: 7,
  24.                   name: 'src :',
  25.                   children: [
  26.                     { id: 8, name: 'index : ts' },
  27.                     { id: 9, name: 'bootstrap : ts' },
  28.                   ],
  29.                 },
  30.               ],
  31.             },
  32.             {
  33.               id: 10,
  34.               name: 'material2 :',
  35.               children: [
  36.                 {
  37.                   id: 11,
  38.                   name: 'src :',
  39.                   children: [
  40.                     { id: 12, name: 'v-btn : ts' },
  41.                     { id: 13, name: 'v-card : ts' },
  42.                     { id: 14, name: 'v-window : ts' },
  43.                   ],
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 15,
  51.           name: 'Downloads :',
  52.           children: [
  53.             { id: 16, name: 'October : pdf' },
  54.             { id: 17, name: 'November : pdf' },
  55.             { id: 18, name: 'Tutorial : html' },
  56.           ],
  57.         },
  58.         {
  59.           id: 19,
  60.           name: 'Videos :',
  61.           children: [
  62.             {
  63.               id: 20,
  64.               name: 'Tutorials :',
  65.               children: [
  66.                 { id: 21, name: 'Basic layouts : mp4' },
  67.                 { id: 22, name: 'Advanced techniques : mp4' },
  68.                 { id: 23, name: 'All about app : dir' },
  69.               ],
  70.             },
  71.             { id: 24, name: 'Intro : mov' },
  72.             { id: 25, name: 'Conference introduction : avi' },
  73.           ],
  74.         },
  75.       ],
  76.     }),
  77.   }
  78. </script>

Treeview（树形视图） - 图14

插槽

使用插槽，我们可以创建一个直观的文件浏览器。 除了 prepend 插槽外，还有一个用于 label 和 append 插槽。

template script

  1. <template>
  2.   <v-treeview
  3.     v-model="tree"
  4.     :open="open"
  5.     :items="items"
  6.     activatable
  7.     item-key="name"
  8.     open-on-click
  9.   >
  10.     <template v-slot:prepend="{ item, open }">
  11.       <v-icon v-if="!item.file">
  12.         {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
  13.       </v-icon>
  14.       <v-icon v-else>
  15.         {{ files[item.file] }}
  16.       </v-icon>
  17.     </template>
  18.   </v-treeview>
  19. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       open: ['public'],
  5.       files: {
  6.         html: 'mdi-language-html5',
  7.         js: 'mdi-nodejs',
  8.         json: 'mdi-json',
  9.         md: 'mdi-markdown',
  10.         pdf: 'mdi-file-pdf',
  11.         png: 'mdi-file-image',
  12.         txt: 'mdi-file-document-outline',
  13.         xls: 'mdi-file-excel',
  14.       },
  15.       tree: [],
  16.       items: [
  17.         {
  18.           name: '.git',
  19.         },
  20.         {
  21.           name: 'node_modules',
  22.         },
  23.         {
  24.           name: 'public',
  25.           children: [
  26.             {
  27.               name: 'static',
  28.               children: [{
  29.                 name: 'logo.png',
  30.                 file: 'png',
  31.               }],
  32.             },
  33.             {
  34.               name: 'favicon.ico',
  35.               file: 'png',
  36.             },
  37.             {
  38.               name: 'index.html',
  39.               file: 'html',
  40.             },
  41.           ],
  42.         },
  43.         {
  44.           name: '.gitignore',
  45.           file: 'txt',
  46.         },
  47.         {
  48.           name: 'babel.config.js',
  49.           file: 'js',
  50.         },
  51.         {
  52.           name: 'package.json',
  53.           file: 'json',
  54.         },
  55.         {
  56.           name: 'README.md',
  57.           file: 'md',
  58.         },
  59.         {
  60.           name: 'vue.config.js',
  61.           file: 'js',
  62.         },
  63.         {
  64.           name: 'yarn.lock',
  65.           file: 'txt',
  66.         },
  67.       ],
  68.     }),
  69.   }
  70. </script>

Treeview（树形视图） - 图15

搜索目录

使用 search 属性轻松过滤您的树形视图。 如果需要区分大小写或模糊过滤，可以通过设置 filter 属性轻松地应用自定义过滤功能。 这类似于 v-autocomplete 组件。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="500"
  5.   >
  6.     <v-sheet class="pa-4 primary lighten-2">
  7.       <v-text-field
  8.         v-model="search"
  9.         label="Search Company Directory"
  10.         dark
  11.         flat
  12.         solo-inverted
  13.         hide-details
  14.         clearable
  15.         clear-icon="mdi-close-circle-outline"
  16.       ></v-text-field>
  17.       <v-checkbox
  18.         v-model="caseSensitive"
  19.         dark
  20.         hide-details
  21.         label="Case sensitive search"
  22.       ></v-checkbox>
  23.     </v-sheet>
  24.     <v-card-text>
  25.       <v-treeview
  26.         :items="items"
  27.         :search="search"
  28.         :filter="filter"
  29.         :open.sync="open"
  30.       >
  31.         <template v-slot:prepend="{ item }">
  32.           <v-icon
  33.             v-if="item.children"
  34.             v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
  35.           ></v-icon>
  36.         </template>
  37.       </v-treeview>
  38.     </v-card-text>
  39.   </v-card>
  40. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           id: 1,
  7.           name: 'Vuetify Human Resources',
  8.           children: [
  9.             {
  10.               id: 2,
  11.               name: 'Core team',
  12.               children: [
  13.                 {
  14.                   id: 201,
  15.                   name: 'John',
  16.                 },
  17.                 {
  18.                   id: 202,
  19.                   name: 'Kael',
  20.                 },
  21.                 {
  22.                   id: 203,
  23.                   name: 'Nekosaur',
  24.                 },
  25.                 {
  26.                   id: 204,
  27.                   name: 'Jacek',
  28.                 },
  29.                 {
  30.                   id: 205,
  31.                   name: 'Andrew',
  32.                 },
  33.               ],
  34.             },
  35.             {
  36.               id: 3,
  37.               name: 'Administrators',
  38.               children: [
  39.                 {
  40.                   id: 301,
  41.                   name: 'Ranee',
  42.                 },
  43.                 {
  44.                   id: 302,
  45.                   name: 'Rachel',
  46.                 },
  47.               ],
  48.             },
  49.             {
  50.               id: 4,
  51.               name: 'Contributors',
  52.               children: [
  53.                 {
  54.                   id: 401,
  55.                   name: 'Phlow',
  56.                 },
  57.                 {
  58.                   id: 402,
  59.                   name: 'Brandon',
  60.                 },
  61.                 {
  62.                   id: 403,
  63.                   name: 'Sean',
  64.                 },
  65.               ],
  66.             },
  67.           ],
  68.         },
  69.       ],
  70.       open: [1, 2],
  71.       search: null,
  72.       caseSensitive: false,
  73.     }),
  74.     computed: {
  75.       filter () {
  76.         return this.caseSensitive
  77.           ? (item, search, textKey) => item[textKey].indexOf(search) > -1
  78.           : undefined
  79.       },
  80.     },
  81.   }
  82. </script>

Treeview（树形视图） - 图16

同步项目

您可以通过向 load-children 属性提供 Promise 回调来动态加载子数据。 用户首次尝试扩展具有子属性（为空数组）的项目时，将执行此回调。

template script

  1. <template>
  2.   <v-card>
  3.     <v-card-title class="indigo white--text headline">
  4.       User Directory
  5.     </v-card-title>
  6.     <v-row
  7.       class="pa-4"
  8.       justify="space-between"
  9.     >
  10.       <v-col cols="5">
  11.         <v-treeview
  12.           :active.sync="active"
  13.           :items="items"
  14.           :load-children="fetchUsers"
  15.           :open.sync="open"
  16.           activatable
  17.           color="warning"
  18.           open-on-click
  19.           transition
  20.         >
  21.           <template v-slot:prepend="{ item, active }">
  22.             <v-icon v-if="!item.children">mdi-account</v-icon>
  23.           </template>
  24.         </v-treeview>
  25.       </v-col>
  27.       <v-divider vertical></v-divider>
  29.       <v-col
  30.         class="d-flex text-center"
  31.       >
  32.         <v-scroll-y-transition mode="out-in">
  33.           <div
  34.             v-if="!selected"
  35.             class="title grey--text text--lighten-1 font-weight-light"
  36.             style="align-self: center;"
  37.           >
  38.             Select a User
  39.           </div>
  40.           <v-card
  41.             v-else
  42.             :key="selected.id"
  43.             class="pt-6 mx-auto"
  44.             flat
  45.             max-width="400"
  46.           >
  47.             <v-card-text>
  48.               <v-avatar
  49.                 v-if="avatar"
  50.                 size="88"
  51.               >
  52.                 <v-img
  53.                   :src="`https://avataaars.io/${avatar}`"
  54.                   class="mb-6"
  55.                 ></v-img>
  56.               </v-avatar>
  57.               <h3 class="headline mb-2">
  58.                 {{ selected.name }}
  59.               </h3>
  60.               <div class="blue--text mb-2">{{ selected.email }}</div>
  61.               <div class="blue--text subheading font-weight-bold">{{ selected.username }}</div>
  62.             </v-card-text>
  63.             <v-divider></v-divider>
  64.             <v-row
  65.               class="text-left"
  66.               tag="v-card-text"
  67.             >
  68.               <v-col class="text-right mr-4 mb-2" tag="strong" cols="5">Company:</v-col>
  69.               <v-col>{{ selected.company.name }}</v-col>
  70.               <v-col class="text-right mr-4 mb-2" tag="strong" cols="5">Website:</v-col>
  71.               <v-col>
  72.                 <a :href="`//${selected.website}`" target="_blank">{{ selected.website }}</a>
  73.               </v-col>
  74.               <v-col class="text-right mr-4 mb-2" tag="strong" cols="5">Phone:</v-col>
  75.               <v-col>{{ selected.phone }}</v-col>
  76.             </v-row>
  77.           </v-card>
  78.         </v-scroll-y-transition>
  79.       </v-col>
  80.     </v-row>
  81.   </v-card>
  82. </template>
  1. <script>
  2.   const avatars = [
  3.     '?accessoriesType=Blank&avatarStyle=Circle&clotheColor=PastelGreen&clotheType=ShirtScoopNeck&eyeType=Wink&eyebrowType=UnibrowNatural&facialHairColor=Black&facialHairType=MoustacheMagnum&hairColor=Platinum&mouthType=Concerned&skinColor=Tanned&topType=Turban',
  4.     '?accessoriesType=Sunglasses&avatarStyle=Circle&clotheColor=Gray02&clotheType=ShirtScoopNeck&eyeType=EyeRoll&eyebrowType=RaisedExcited&facialHairColor=Red&facialHairType=BeardMagestic&hairColor=Red&hatColor=White&mouthType=Twinkle&skinColor=DarkBrown&topType=LongHairBun',
  5.     '?accessoriesType=Prescription02&avatarStyle=Circle&clotheColor=Black&clotheType=ShirtVNeck&eyeType=Surprised&eyebrowType=Angry&facialHairColor=Blonde&facialHairType=Blank&hairColor=Blonde&hatColor=PastelOrange&mouthType=Smile&skinColor=Black&topType=LongHairNotTooLong',
  6.     '?accessoriesType=Round&avatarStyle=Circle&clotheColor=PastelOrange&clotheType=Overall&eyeType=Close&eyebrowType=AngryNatural&facialHairColor=Blonde&facialHairType=Blank&graphicType=Pizza&hairColor=Black&hatColor=PastelBlue&mouthType=Serious&skinColor=Light&topType=LongHairBigHair',
  7.     '?accessoriesType=Kurt&avatarStyle=Circle&clotheColor=Gray01&clotheType=BlazerShirt&eyeType=Surprised&eyebrowType=Default&facialHairColor=Red&facialHairType=Blank&graphicType=Selena&hairColor=Red&hatColor=Blue02&mouthType=Twinkle&skinColor=Pale&topType=LongHairCurly',
  8.   ]
  10.   const pause = ms => new Promise(resolve => setTimeout(resolve, ms))
  12.   export default {
  13.     data: () => ({
  14.       active: [],
  15.       avatar: null,
  16.       open: [],
  17.       users: [],
  18.     }),
  20.     computed: {
  21.       items () {
  22.         return [
  23.           {
  24.             name: 'Users',
  25.             children: this.users,
  26.           },
  27.         ]
  28.       },
  29.       selected () {
  30.         if (!this.active.length) return undefined
  32.         const id = this.active[0]
  34.         return this.users.find(user => user.id === id)
  35.       },
  36.     },
  38.     watch: {
  39.       selected: 'randomAvatar',
  40.     },
  42.     methods: {
  43.       async fetchUsers (item) {
  44.         // Remove in 6 months and say
  45.         // you've made optimizations! :)
  46.         await pause(1500)
  48.         return fetch('https://jsonplaceholder.typicode.com/users')
  49.           .then(res => res.json())
  50.           .then(json => (item.children.push(...json)))
  51.           .catch(err => console.warn(err))
  52.       },
  53.       randomAvatar () {
  54.         this.avatar = avatars[Math.floor(Math.random() * avatars.length)]
  55.       },
  56.     },
  57.   }
  58. </script>

Treeview（树形视图） - 图17

自定义可选择图标

为您的可选树形视图自定义 on, off 和 indeterminate 图标。 与其他高级功能（如 API 加载项）结合使用。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       color="primary"
  5.       dark
  6.       flat
  7.     >
  8.       <v-icon>mdi-silverware</v-icon>
  9.       <v-toolbar-title>Local hotspots</v-toolbar-title>
  10.     </v-toolbar>
  12.     <v-row>
  13.       <v-col>
  14.         <v-card-text>
  15.           <v-treeview
  16.             v-model="tree"
  17.             :load-children="fetch"
  18.             :items="items"
  19.             selected-color="indigo"
  20.             open-on-click
  21.             selectable
  22.             return-object
  23.             expand-icon="mdi-chevron-down"
  24.             on-icon="mdi-bookmark"
  25.             off-icon="mdi-bookmark-outline"
  26.             indeterminate-icon="mdi-bookmark-minus"
  27.           >
  28.           </v-treeview>
  29.         </v-card-text>
  30.       </v-col>
  32.       <v-divider vertical></v-divider>
  34.       <v-col
  35.         cols="12"
  36.         md="6"
  37.       >
  38.         <v-card-text>
  39.           <div
  40.             v-if="tree.length === 0"
  41.             key="title"
  42.             class="title font-weight-light grey--text pa-4 text-center"
  43.           >
  44.             Select your favorite breweries
  45.           </div>
  47.           <v-scroll-x-transition
  48.             group
  49.             hide-on-leave
  50.           >
  51.             <v-chip
  52.               v-for="(selection, i) in tree"
  53.               :key="i"
  54.               color="grey"
  55.               dark
  56.               small
  57.               class="ma-1"
  58.             >
  59.               <v-icon left small>mdi-beer</v-icon>
  60.               {{ selection.name }}
  61.             </v-chip>
  62.           </v-scroll-x-transition>
  63.         </v-card-text>
  64.       </v-col>
  65.     </v-row>
  67.     <v-divider></v-divider>
  69.     <v-card-actions>
  70.       <v-btn
  71.         text
  72.         @click="tree = []"
  73.       >
  74.         Reset
  75.       </v-btn>
  77.       <v-spacer></v-spacer>
  79.       <v-btn
  80.         class="white--text"
  81.         color="green darken-1"
  82.         depressed
  83.       >
  84.         Save
  85.         <v-icon right>mdi-content-save</v-icon>
  86.       </v-btn>
  87.     </v-card-actions>
  88.   </v-card>
  89. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       breweries: [],
  5.       isLoading: false,
  6.       tree: [],
  7.       types: [],
  8.     }),
  10.     computed: {
  11.       items () {
  12.         const children = this.types.map(type => ({
  13.           id: type,
  14.           name: this.getName(type),
  15.           children: this.getChildren(type),
  16.         }))
  18.         return [{
  19.           id: 1,
  20.           name: 'All Breweries',
  21.           children,
  22.         }]
  23.       },
  24.       shouldShowTree () {
  25.         return this.breweries.length > 0 && !this.isLoading
  26.       },
  27.     },
  29.     watch: {
  30.       breweries (val) {
  31.         this.types = val.reduce((acc, cur) => {
  32.           const type = cur.brewery_type
  34.           if (!acc.includes(type)) acc.push(type)
  36.           return acc
  37.         }, []).sort()
  38.       },
  39.     },
  41.     methods: {
  42.       fetch () {
  43.         if (this.breweries.length) return
  45.         return fetch('https://api.openbrewerydb.org/breweries')
  46.           .then(res => res.json())
  47.           .then(data => (this.breweries = data))
  48.           .catch(err => console.log(err))
  49.       },
  50.       getChildren (type) {
  51.         const breweries = []
  53.         for (const brewery of this.breweries) {
  54.           if (brewery.brewery_type !== type) continue
  56.           breweries.push({
  57.             ...brewery,
  58.             name: this.getName(brewery.name),
  59.           })
  60.         }
  62.         return breweries.sort((a, b) => {
  63.           return a.name > b.name ? 1 : -1
  64.         })
  65.       },
  66.       getName (name) {
  67.         return `${name.charAt(0).toUpperCase()}${name.slice(1)}`
  68.       },
  69.     },
  70.   }
  71. </script>

Treeview（树形视图） - 图18