数据表格

v-data-table 组件用于显示表格数据。功能包括排序、搜索、分页、内嵌式编辑和行选择。

用例

标准数据表格默认将您的数据作为简单行渲染。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     :items-per-page="5"
  6.     class="elevation-1"
  7.   ></v-data-table>
  8. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         headers: [
  6.           {
  7.             text: 'Dessert (100g serving)',
  8.             align: 'start',
  9.             sortable: false,
  10.             value: 'name',
  11.           },
  12.           { text: 'Calories', value: 'calories' },
  13.           { text: 'Fat (g)', value: 'fat' },
  14.           { text: 'Carbs (g)', value: 'carbs' },
  15.           { text: 'Protein (g)', value: 'protein' },
  16.           { text: 'Iron (%)', value: 'iron' },
  17.         ],
  18.         desserts: [
  19.           {
  20.             name: 'Frozen Yogurt',
  21.             calories: 159,
  22.             fat: 6.0,
  23.             carbs: 24,
  24.             protein: 4.0,
  25.             iron: '1%',
  26.           },
  27.           {
  28.             name: 'Ice cream sandwich',
  29.             calories: 237,
  30.             fat: 9.0,
  31.             carbs: 37,
  32.             protein: 4.3,
  33.             iron: '1%',
  34.           },
  35.           {
  36.             name: 'Eclair',
  37.             calories: 262,
  38.             fat: 16.0,
  39.             carbs: 23,
  40.             protein: 6.0,
  41.             iron: '7%',
  42.           },
  43.           {
  44.             name: 'Cupcake',
  45.             calories: 305,
  46.             fat: 3.7,
  47.             carbs: 67,
  48.             protein: 4.3,
  49.             iron: '8%',
  50.           },
  51.           {
  52.             name: 'Gingerbread',
  53.             calories: 356,
  54.             fat: 16.0,
  55.             carbs: 49,
  56.             protein: 3.9,
  57.             iron: '16%',
  58.           },
  59.           {
  60.             name: 'Jelly bean',
  61.             calories: 375,
  62.             fat: 0.0,
  63.             carbs: 94,
  64.             protein: 0.0,
  65.             iron: '0%',
  66.           },
  67.           {
  68.             name: 'Lollipop',
  69.             calories: 392,
  70.             fat: 0.2,
  71.             carbs: 98,
  72.             protein: 0,
  73.             iron: '2%',
  74.           },
  75.           {
  76.             name: 'Honeycomb',
  77.             calories: 408,
  78.             fat: 3.2,
  79.             carbs: 87,
  80.             protein: 6.5,
  81.             iron: '45%',
  82.           },
  83.           {
  84.             name: 'Donut',
  85.             calories: 452,
  86.             fat: 25.0,
  87.             carbs: 51,
  88.             protein: 4.9,
  89.             iron: '22%',
  90.           },
  91.           {
  92.             name: 'KitKat',
  93.             calories: 518,
  94.             fat: 26.0,
  95.             carbs: 65,
  96.             protein: 7,
  97.             iron: '6%',
  98.           },
  99.         ],
  100.       }
  101.     },
  102.   }
  103. </script>

Data tables（数据表格）updated - 图1

API

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

Data tables（数据表格）updated - 图2

示例

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

行选择框

show-select 属性将在默认标题中呈现一个复选框来切换所有行，并为每个默认行呈现一个复选框。你可以自定义 header.data-table-select 和 item.data-table-select 这些插槽的标题。您也可以在一次允许多个选定行之间进行切换，也可以使用 single-select 属性仅允许一次进行切换。

template script

  1. <template>
  2.   <v-data-table
  3.     v-model="selected"
  4.     :headers="headers"
  5.     :items="desserts"
  6.     :single-select="singleSelect"
  7.     item-key="name"
  8.     show-select
  9.     class="elevation-1"
  10.   >
  11.     <template v-slot:top>
  12.       <v-switch v-model="singleSelect" label="Single select" class="pa-3"></v-switch>
  13.     </template>
  14.   </v-data-table>
  15. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         singleSelect: false,
  6.         selected: [],
  7.         headers: [
  8.           {
  9.             text: 'Dessert (100g serving)',
  10.             align: 'start',
  11.             sortable: false,
  12.             value: 'name',
  13.           },
  14.           { text: 'Calories', value: 'calories' },
  15.           { text: 'Fat (g)', value: 'fat' },
  16.           { text: 'Carbs (g)', value: 'carbs' },
  17.           { text: 'Protein (g)', value: 'protein' },
  18.           { text: 'Iron (%)', value: 'iron' },
  19.         ],
  20.         desserts: [
  21.           {
  22.             name: 'Frozen Yogurt',
  23.             calories: 159,
  24.             fat: 6.0,
  25.             carbs: 24,
  26.             protein: 4.0,
  27.             iron: '1%',
  28.           },
  29.           {
  30.             name: 'Ice cream sandwich',
  31.             calories: 237,
  32.             fat: 9.0,
  33.             carbs: 37,
  34.             protein: 4.3,
  35.             iron: '1%',
  36.           },
  37.           {
  38.             name: 'Eclair',
  39.             calories: 262,
  40.             fat: 16.0,
  41.             carbs: 23,
  42.             protein: 6.0,
  43.             iron: '7%',
  44.           },
  45.           {
  46.             name: 'Cupcake',
  47.             calories: 305,
  48.             fat: 3.7,
  49.             carbs: 67,
  50.             protein: 4.3,
  51.             iron: '8%',
  52.           },
  53.           {
  54.             name: 'Gingerbread',
  55.             calories: 356,
  56.             fat: 16.0,
  57.             carbs: 49,
  58.             protein: 3.9,
  59.             iron: '16%',
  60.           },
  61.           {
  62.             name: 'Jelly bean',
  63.             calories: 375,
  64.             fat: 0.0,
  65.             carbs: 94,
  66.             protein: 0.0,
  67.             iron: '0%',
  68.           },
  69.           {
  70.             name: 'Lollipop',
  71.             calories: 392,
  72.             fat: 0.2,
  73.             carbs: 98,
  74.             protein: 0,
  75.             iron: '2%',
  76.           },
  77.           {
  78.             name: 'Honeycomb',
  79.             calories: 408,
  80.             fat: 3.2,
  81.             carbs: 87,
  82.             protein: 6.5,
  83.             iron: '45%',
  84.           },
  85.           {
  86.             name: 'Donut',
  87.             calories: 452,
  88.             fat: 25.0,
  89.             carbs: 51,
  90.             protein: 4.9,
  91.             iron: '22%',
  92.           },
  93.           {
  94.             name: 'KitKat',
  95.             calories: 518,
  96.             fat: 26.0,
  97.             carbs: 65,
  98.             protein: 7,
  99.             iron: '6%',
  100.           },
  101.         ],
  102.       }
  103.     },
  104.   }
  105. </script>

Data tables（数据表格）updated - 图3

分组行

使用 group-by 和 group-desc 属性可以将项目的属性的行进行分组。show-group-by 属性将在默认标题中显示一个组按钮。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     item-key="name"
  6.     group-by="category"
  7.     class="elevation-1"
  8.     show-group-by
  9.   ></v-data-table>
  10. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         headers: [
  6.           {
  7.             text: 'Dessert (100g serving)',
  8.             align: 'start',
  9.             value: 'name',
  10.           },
  11.           { text: 'Category', value: 'category' },
  12.         ],
  13.         desserts: [
  14.           {
  15.             name: 'Frozen Yogurt',
  16.             category: 'Ice cream',
  17.           },
  18.           {
  19.             name: 'Ice cream sandwich',
  20.             category: 'Ice cream',
  21.           },
  22.           {
  23.             name: 'Eclair',
  24.             category: 'Cookie',
  25.           },
  26.           {
  27.             name: 'Cupcake',
  28.             category: 'Pastry',
  29.           },
  30.           {
  31.             name: 'Gingerbread',
  32.             category: 'Cookie',
  33.           },
  34.           {
  35.             name: 'Jelly bean',
  36.             category: 'Candy',
  37.           },
  38.           {
  39.             name: 'Lollipop',
  40.             category: 'Candy',
  41.           },
  42.           {
  43.             name: 'Honeycomb',
  44.             category: 'Toffee',
  45.           },
  46.           {
  47.             name: 'Donut',
  48.             category: 'Pastry',
  49.           },
  50.           {
  51.             name: 'KitKat',
  52.             category: 'Candy',
  53.           },
  54.         ],
  55.       }
  56.     },
  57.   }
  58. </script>

Data tables（数据表格）updated - 图4

按多列排序

使用 multi-sort 属性将使您可以同时对多个列进行排序。 启用后，您可以将数组传递给 sort-by 和 sort-desc 来以编程方式控制排序，而不是单个值。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     :sort-by="['calories', 'fat']"
  6.     :sort-desc="[false, true]"
  7.     multi-sort
  8.     class="elevation-1"
  9.   ></v-data-table>
  10. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         headers: [
  6.           {
  7.             text: 'Dessert (100g serving)',
  8.             align: 'start',
  9.             sortable: false,
  10.             value: 'name',
  11.           },
  12.           { text: 'Calories', value: 'calories' },
  13.           { text: 'Fat (g)', value: 'fat' },
  14.           { text: 'Carbs (g)', value: 'carbs' },
  15.           { text: 'Protein (g)', value: 'protein' },
  16.           { text: 'Iron (%)', value: 'iron' },
  17.         ],
  18.         desserts: [
  19.           {
  20.             name: 'Frozen Yogurt',
  21.             calories: 200,
  22.             fat: 6.0,
  23.             carbs: 24,
  24.             protein: 4.0,
  25.             iron: '1%',
  26.           },
  27.           {
  28.             name: 'Ice cream sandwich',
  29.             calories: 200,
  30.             fat: 9.0,
  31.             carbs: 37,
  32.             protein: 4.3,
  33.             iron: '1%',
  34.           },
  35.           {
  36.             name: 'Eclair',
  37.             calories: 300,
  38.             fat: 16.0,
  39.             carbs: 23,
  40.             protein: 6.0,
  41.             iron: '7%',
  42.           },
  43.           {
  44.             name: 'Cupcake',
  45.             calories: 300,
  46.             fat: 3.7,
  47.             carbs: 67,
  48.             protein: 4.3,
  49.             iron: '8%',
  50.           },
  51.           {
  52.             name: 'Gingerbread',
  53.             calories: 400,
  54.             fat: 16.0,
  55.             carbs: 49,
  56.             protein: 3.9,
  57.             iron: '16%',
  58.           },
  59.           {
  60.             name: 'Jelly bean',
  61.             calories: 400,
  62.             fat: 0.0,
  63.             carbs: 94,
  64.             protein: 0.0,
  65.             iron: '0%',
  66.           },
  67.           {
  68.             name: 'Lollipop',
  69.             calories: 400,
  70.             fat: 0.2,
  71.             carbs: 98,
  72.             protein: 0,
  73.             iron: '2%',
  74.           },
  75.           {
  76.             name: 'Honeycomb',
  77.             calories: 400,
  78.             fat: 3.2,
  79.             carbs: 87,
  80.             protein: 6.5,
  81.             iron: '45%',
  82.           },
  83.           {
  84.             name: 'Donut',
  85.             calories: 500,
  86.             fat: 25.0,
  87.             carbs: 51,
  88.             protein: 4.9,
  89.             iron: '22%',
  90.           },
  91.           {
  92.             name: 'KitKat',
  93.             calories: 500,
  94.             fat: 26.0,
  95.             carbs: 65,
  96.             protein: 7,
  97.             iron: '6%',
  98.           },
  99.         ],
  100.       }
  101.     },
  102.   }
  103. </script>

Data tables（数据表格）updated - 图5

搜索

数据表格还提供了一个 search 属性，允许你进行数据筛选。

template script

  1. <template>
  2.   <v-card>
  3.     <v-card-title>
  4.       Nutrition
  5.       <v-spacer></v-spacer>
  6.       <v-text-field
  7.         v-model="search"
  8.         append-icon="mdi-magnify"
  9.         label="Search"
  10.         single-line
  11.         hide-details
  12.       ></v-text-field>
  13.     </v-card-title>
  14.     <v-data-table
  15.       :headers="headers"
  16.       :items="desserts"
  17.       :search="search"
  18.     ></v-data-table>
  19.   </v-card>
  20. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         search: '',
  6.         headers: [
  7.           {
  8.             text: 'Dessert (100g serving)',
  9.             align: 'start',
  10.             sortable: false,
  11.             value: 'name',
  12.           },
  13.           { text: 'Calories', value: 'calories' },
  14.           { text: 'Fat (g)', value: 'fat' },
  15.           { text: 'Carbs (g)', value: 'carbs' },
  16.           { text: 'Protein (g)', value: 'protein' },
  17.           { text: 'Iron (%)', value: 'iron' },
  18.         ],
  19.         desserts: [
  20.           {
  21.             name: 'Frozen Yogurt',
  22.             calories: 159,
  23.             fat: 6.0,
  24.             carbs: 24,
  25.             protein: 4.0,
  26.             iron: '1%',
  27.           },
  28.           {
  29.             name: 'Ice cream sandwich',
  30.             calories: 237,
  31.             fat: 9.0,
  32.             carbs: 37,
  33.             protein: 4.3,
  34.             iron: '1%',
  35.           },
  36.           {
  37.             name: 'Eclair',
  38.             calories: 262,
  39.             fat: 16.0,
  40.             carbs: 23,
  41.             protein: 6.0,
  42.             iron: '7%',
  43.           },
  44.           {
  45.             name: 'Cupcake',
  46.             calories: 305,
  47.             fat: 3.7,
  48.             carbs: 67,
  49.             protein: 4.3,
  50.             iron: '8%',
  51.           },
  52.           {
  53.             name: 'Gingerbread',
  54.             calories: 356,
  55.             fat: 16.0,
  56.             carbs: 49,
  57.             protein: 3.9,
  58.             iron: '16%',
  59.           },
  60.           {
  61.             name: 'Jelly bean',
  62.             calories: 375,
  63.             fat: 0.0,
  64.             carbs: 94,
  65.             protein: 0.0,
  66.             iron: '0%',
  67.           },
  68.           {
  69.             name: 'Lollipop',
  70.             calories: 392,
  71.             fat: 0.2,
  72.             carbs: 98,
  73.             protein: 0,
  74.             iron: '2%',
  75.           },
  76.           {
  77.             name: 'Honeycomb',
  78.             calories: 408,
  79.             fat: 3.2,
  80.             carbs: 87,
  81.             protein: 6.5,
  82.             iron: '45%',
  83.           },
  84.           {
  85.             name: 'Donut',
  86.             calories: 452,
  87.             fat: 25.0,
  88.             carbs: 51,
  89.             protein: 4.9,
  90.             iron: '22%',
  91.           },
  92.           {
  93.             name: 'KitKat',
  94.             calories: 518,
  95.             fat: 26.0,
  96.             carbs: 65,
  97.             protein: 7,
  98.             iron: '6%',
  99.           },
  100.         ],
  101.       }
  102.     },
  103.   }
  104. </script>

Data tables（数据表格）updated - 图6

无头表格

您可以使用 hide-default-header 和 hide-default-footer 属性分别移除默认页眉和页脚。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     hide-default-header
  6.     hide-default-footer
  7.     class="elevation-1"
  8.   ></v-data-table>
  9. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         headers: [
  6.           {
  7.             text: 'Dessert (100g serving)',
  8.             align: 'start',
  9.             value: 'name',
  10.           },
  11.           { text: 'Calories', value: 'calories' },
  12.           { text: 'Fat (g)', value: 'fat' },
  13.           { text: 'Carbs (g)', value: 'carbs' },
  14.           { text: 'Protein (g)', value: 'protein' },
  15.           { text: 'Iron (%)', value: 'iron' },
  16.         ],
  17.         desserts: [
  18.           {
  19.             name: 'Frozen Yogurt',
  20.             calories: 159,
  21.             fat: 6.0,
  22.             carbs: 24,
  23.             protein: 4.0,
  24.             iron: '1%',
  25.           },
  26.           {
  27.             name: 'Ice cream sandwich',
  28.             calories: 237,
  29.             fat: 9.0,
  30.             carbs: 37,
  31.             protein: 4.3,
  32.             iron: '1%',
  33.           },
  34.           {
  35.             name: 'Eclair',
  36.             calories: 262,
  37.             fat: 16.0,
  38.             carbs: 23,
  39.             protein: 6.0,
  40.             iron: '7%',
  41.           },
  42.           {
  43.             name: 'Cupcake',
  44.             calories: 305,
  45.             fat: 3.7,
  46.             carbs: 67,
  47.             protein: 4.3,
  48.             iron: '8%',
  49.           },
  50.           {
  51.             name: 'Gingerbread',
  52.             calories: 356,
  53.             fat: 16.0,
  54.             carbs: 49,
  55.             protein: 3.9,
  56.             iron: '16%',
  57.           },
  58.           {
  59.             name: 'Jelly bean',
  60.             calories: 375,
  61.             fat: 0.0,
  62.             carbs: 94,
  63.             protein: 0.0,
  64.             iron: '0%',
  65.           },
  66.           {
  67.             name: 'Lollipop',
  68.             calories: 392,
  69.             fat: 0.2,
  70.             carbs: 98,
  71.             protein: 0,
  72.             iron: '2%',
  73.           },
  74.           {
  75.             name: 'Honeycomb',
  76.             calories: 408,
  77.             fat: 3.2,
  78.             carbs: 87,
  79.             protein: 6.5,
  80.             iron: '45%',
  81.           },
  82.           {
  83.             name: 'Donut',
  84.             calories: 452,
  85.             fat: 25.0,
  86.             carbs: 51,
  87.             protein: 4.9,
  88.             iron: '22%',
  89.           },
  90.           {
  91.             name: 'KitKat',
  92.             calories: 518,
  93.             fat: 26.0,
  94.             carbs: 65,
  95.             protein: 7,
  96.             iron: '6%',
  97.           },
  98.         ],
  99.       }
  100.     },
  101.   }
  102. </script>

Data tables（数据表格）updated - 图7

加载状态

您可以使用 loading 属性来表示表中的数据正在加载中。 如果表中没有数据，也会显示加载消息。 此消息可以使用 loading-text 属性或 loading 插槽自定义。

template

  1. <template>
  2.   <v-data-table item-key="name" class="elevation-1" loading loading-text="Loading... Please wait"></v-data-table>
  3. </template>

Data tables（数据表格）updated - 图8

密集

使用 dense 属性，您可以为数据表提供其他样式。

template script

  1. <template>
  2.   <v-data-table dense :headers="headers" :items="desserts" item-key="name" class="elevation-1"></v-data-table>
  3. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       desserts: [
  5.         {
  6.           name: 'Frozen Yogurt',
  7.           calories: 159,
  8.           fat: 6.0,
  9.           carbs: 24,
  10.           protein: 4.0,
  11.           iron: '1%',
  12.         },
  13.         {
  14.           name: 'Ice cream sandwich',
  15.           calories: 237,
  16.           fat: 9.0,
  17.           carbs: 37,
  18.           protein: 4.3,
  19.           iron: '1%',
  20.         },
  21.         {
  22.           name: 'Eclair',
  23.           calories: 262,
  24.           fat: 16.0,
  25.           carbs: 23,
  26.           protein: 6.0,
  27.           iron: '7%',
  28.         },
  29.         {
  30.           name: 'Cupcake',
  31.           calories: 305,
  32.           fat: 3.7,
  33.           carbs: 67,
  34.           protein: 4.3,
  35.           iron: '8%',
  36.         },
  37.         {
  38.           name: 'Gingerbread',
  39.           calories: 356,
  40.           fat: 16.0,
  41.           carbs: 49,
  42.           protein: 3.9,
  43.           iron: '16%',
  44.         },
  45.         {
  46.           name: 'Jelly bean',
  47.           calories: 375,
  48.           fat: 0.0,
  49.           carbs: 94,
  50.           protein: 0.0,
  51.           iron: '0%',
  52.         },
  53.         {
  54.           name: 'Lollipop',
  55.           calories: 392,
  56.           fat: 0.2,
  57.           carbs: 98,
  58.           protein: 0,
  59.           iron: '2%',
  60.         },
  61.         {
  62.           name: 'Honeycomb',
  63.           calories: 408,
  64.           fat: 3.2,
  65.           carbs: 87,
  66.           protein: 6.5,
  67.           iron: '45%',
  68.         },
  69.         {
  70.           name: 'Donut',
  71.           calories: 452,
  72.           fat: 25.0,
  73.           carbs: 51,
  74.           protein: 4.9,
  75.           iron: '22%',
  76.         },
  77.         {
  78.           name: 'KitKat',
  79.           calories: 518,
  80.           fat: 26.0,
  81.           carbs: 65,
  82.           protein: 7,
  83.           iron: '6%',
  84.         },
  85.       ],
  86.       headers: [
  87.         {
  88.           text: 'Dessert (100g serving)',
  89.           align: 'start',
  90.           sortable: false,
  91.           value: 'name',
  92.         },
  93.         { text: 'Calories', value: 'calories' },
  94.         { text: 'Fat (g)', value: 'fat' },
  95.         { text: 'Carbs (g)', value: 'carbs' },
  96.         { text: 'Protein (g)', value: 'protein' },
  97.         { text: 'Iron (%)', value: 'iron' },
  98.       ],
  99.     }),
  100.   }
  101. </script>

Data tables（数据表格）updated - 图9

页脚属性

v-data-table 使用 v-data-footer 组件渲染默认页脚。 您可以使用 footer-props 将属性传递到此组件。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     :items-per-page="5"
  6.     item-key="name"
  7.     class="elevation-1"
  8.     :footer-props="{
  9.       showFirstLastPage: true,
  10.       firstIcon: 'mdi-arrow-collapse-left',
  11.       lastIcon: 'mdi-arrow-collapse-right',
  12.       prevIcon: 'mdi-minus',
  13.       nextIcon: 'mdi-plus'
  14.     }"
  15.   ></v-data-table>
  16. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         headers: [
  6.           {
  7.             text: 'Dessert (100g serving)',
  8.             align: 'start',
  9.             value: 'name',
  10.           },
  11.           { text: 'Category', value: 'category' },
  12.         ],
  13.         desserts: [
  14.           {
  15.             name: 'Frozen Yogurt',
  16.             category: 'Ice cream',
  17.           },
  18.           {
  19.             name: 'Ice cream sandwich',
  20.             category: 'Ice cream',
  21.           },
  22.           {
  23.             name: 'Eclair',
  24.             category: 'Cookie',
  25.           },
  26.           {
  27.             name: 'Cupcake',
  28.             category: 'Pastry',
  29.           },
  30.           {
  31.             name: 'Gingerbread',
  32.             category: 'Cookie',
  33.           },
  34.           {
  35.             name: 'Jelly bean',
  36.             category: 'Candy',
  37.           },
  38.           {
  39.             name: 'Lollipop',
  40.             category: 'Candy',
  41.           },
  42.           {
  43.             name: 'Honeycomb',
  44.             category: 'Toffee',
  45.           },
  46.           {
  47.             name: 'Donut',
  48.             category: 'Pastry',
  49.           },
  50.           {
  51.             name: 'KitKat',
  52.             category: 'Candy',
  53.           },
  54.         ],
  55.       }
  56.     },
  57.   }
  58. </script>

Data tables（数据表格）updated - 图10

过滤列

通过在标题项上将 filterable 的属性设置为 false，可以轻松地禁止在搜索表行时包括特定列。 在下面的示例中，甜点名称列不再可搜索。

template script

  1. <template>
  2.   <v-card>
  3.     <v-card-title>
  4.       <v-text-field
  5.         v-model="search"
  6.         append-icon="search"
  7.         label="Search"
  8.         single-line
  9.         hide-details
  10.       ></v-text-field>
  11.     </v-card-title>
  12.     <v-data-table
  13.       :headers="headers"
  14.       :items="desserts"
  15.       :search="search"
  16.     ></v-data-table>
  17.   </v-card>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         search: '',
  6.         headers: [
  7.           {
  8.             text: 'Dessert (100g serving)',
  9.             align: 'start',
  10.             filterable: false,
  11.             value: 'name',
  12.           },
  13.           { text: 'Calories', value: 'calories' },
  14.           { text: 'Fat (g)', value: 'fat' },
  15.           { text: 'Carbs (g)', value: 'carbs' },
  16.           { text: 'Protein (g)', value: 'protein' },
  17.           { text: 'Iron (%)', value: 'iron' },
  18.         ],
  19.         desserts: [
  20.           {
  21.             name: 'Frozen Yogurt',
  22.             calories: 159,
  23.             fat: 6.0,
  24.             carbs: 24,
  25.             protein: 4.0,
  26.             iron: '1%',
  27.           },
  28.           {
  29.             name: 'Ice cream sandwich',
  30.             calories: 237,
  31.             fat: 9.0,
  32.             carbs: 37,
  33.             protein: 4.3,
  34.             iron: '1%',
  35.           },
  36.           {
  37.             name: 'Eclair',
  38.             calories: 262,
  39.             fat: 16.0,
  40.             carbs: 23,
  41.             protein: 6.0,
  42.             iron: '7%',
  43.           },
  44.           {
  45.             name: 'Cupcake',
  46.             calories: 305,
  47.             fat: 3.7,
  48.             carbs: 67,
  49.             protein: 4.3,
  50.             iron: '8%',
  51.           },
  52.           {
  53.             name: 'Gingerbread',
  54.             calories: 356,
  55.             fat: 16.0,
  56.             carbs: 49,
  57.             protein: 3.9,
  58.             iron: '16%',
  59.           },
  60.           {
  61.             name: 'Jelly bean',
  62.             calories: 375,
  63.             fat: 0.0,
  64.             carbs: 94,
  65.             protein: 0.0,
  66.             iron: '0%',
  67.           },
  68.           {
  69.             name: 'Lollipop',
  70.             calories: 392,
  71.             fat: 0.2,
  72.             carbs: 98,
  73.             protein: 0,
  74.             iron: '2%',
  75.           },
  76.           {
  77.             name: 'Honeycomb',
  78.             calories: 408,
  79.             fat: 3.2,
  80.             carbs: 87,
  81.             protein: 6.5,
  82.             iron: '45%',
  83.           },
  84.           {
  85.             name: 'Donut',
  86.             calories: 452,
  87.             fat: 25.0,
  88.             carbs: 51,
  89.             protein: 4.9,
  90.             iron: '22%',
  91.           },
  92.           {
  93.             name: 'KitKat',
  94.             calories: 518,
  95.             fat: 26.0,
  96.             carbs: 65,
  97.             protein: 7,
  98.             iron: '6%',
  99.           },
  100.         ],
  101.       }
  102.     },
  103.   }
  104. </script>

Data tables（数据表格）updated - 图11

插槽

v-data-table 提供了大量用于定制表的插槽。 此示例展示了其中一些插槽，以及每个插槽可以做什么。 重要的是要注意一些插槽（例如：item/body/header）将完全代替组件的内部渲染，这将要求您重新实现选择和扩展之类的功能。 某些插槽会相互覆盖，例如：body > item > item.<name> 和 header/header.<name>。

template script

  1. <template>
  2.   <div>
  3.     <v-select v-model="enabled" :items="slots" label="Slot" clearable></v-select>
  4.     <v-data-table
  5.       :headers="headers"
  6.       :items="items"
  7.       :search="search"
  8.       :hide-default-header="hideHeaders"
  9.       :show-select="showSelect"
  10.       :loading="isLoading"
  11.       hide-default-footer
  12.       item-key="name"
  13.       class="elevation-1"
  14.     >
  15.       <template v-if="isEnabled('top')" v-slot:top>
  16.         <div>This is content above the actual table</div>
  17.       </template>
  19.       <template v-if="isEnabled('header.data-table-select')" v-slot:header.data-table-select="{ on, props }">
  20.         <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
  21.       </template>
  23.       <template v-if="isEnabled('header')" v-slot:header="{ props: { headers } }">
  24.         <thead>
  25.           <tr>
  26.             <th :colspan="headers.length">
  27.               This is a header
  28.             </th>
  29.           </tr>
  30.         </thead>
  31.       </template>
  33.       <template v-if="isEnabled('progress')" v-slot:progress>
  34.         <v-progress-linear color="purple" :height="10" indeterminate></v-progress-linear>
  35.       </template>
  37.       <template v-if="isEnabled('item.data-table-select')" v-slot:item.data-table-select="{ isSelected, select }">
  38.         <v-simple-checkbox color="green" :value="isSelected" @input="select($event)"></v-simple-checkbox>
  39.       </template>
  41.       <template v-if="isEnabled('item.<name>')" v-slot:item.name="{ item }">
  42.         {{ item.name.toUpperCase() }}
  43.       </template>
  45.       <template v-if="isEnabled('body.prepend')" v-slot:body.prepend="{ headers }">
  46.         <tr>
  47.           <td :colspan="headers.length">
  48.             This is a prepended row
  49.           </td>
  50.         </tr>
  51.       </template>
  53.       <template v-if="isEnabled('body')" v-slot:body="{ items }">
  54.         <tbody>
  55.           <tr v-for="item in items" :key="item.name">
  56.             <td>{{ item.name }}</td>
  57.             <td>CONTENT</td>
  58.             <td>CONTENT</td>
  59.             <td>CONTENT</td>
  60.             <td>CONTENT</td>
  61.             <td>CONTENT</td>
  62.           </tr>
  63.         </tbody>
  64.       </template>
  66.       <template v-if="isEnabled('no-data')" v-slot:no-data>
  67.         NO DATA HERE!
  68.       </template>
  70.       <template v-if="isEnabled('no-results')" v-slot:no-results>
  71.         NO RESULTS HERE!
  72.       </template>
  74.       <template v-if="isEnabled('body.append')" v-slot:body.append="{ headers }">
  75.         <tr>
  76.           <td :colspan="headers.length">
  77.             This is an appended row
  78.           </td>
  79.         </tr>
  80.       </template>
  82.       <template v-if="isEnabled('footer')" v-slot:footer>
  83.         <div>
  84.           This is a footer
  85.         </div>
  86.       </template>
  87.     </v-data-table>
  88.   </div>
  89. </template>
  1. <script>
  2.   const desserts = [
  3.     {
  4.       name: 'Frozen Yogurt',
  5.       calories: 159,
  6.       fat: 6.0,
  7.       carbs: 24,
  8.       protein: 4.0,
  9.       iron: '1%',
  10.     },
  11.     {
  12.       name: 'Ice cream sandwich',
  13.       calories: 237,
  14.       fat: 9.0,
  15.       carbs: 37,
  16.       protein: 4.3,
  17.       iron: '1%',
  18.     },
  19.     {
  20.       name: 'Eclair',
  21.       calories: 262,
  22.       fat: 16.0,
  23.       carbs: 23,
  24.       protein: 6.0,
  25.       iron: '7%',
  26.     },
  27.     {
  28.       name: 'Cupcake',
  29.       calories: 305,
  30.       fat: 3.7,
  31.       carbs: 67,
  32.       protein: 4.3,
  33.       iron: '8%',
  34.     },
  35.     {
  36.       name: 'Gingerbread',
  37.       calories: 356,
  38.       fat: 16.0,
  39.       carbs: 49,
  40.       protein: 3.9,
  41.       iron: '16%',
  42.     },
  43.     {
  44.       name: 'Jelly bean',
  45.       calories: 375,
  46.       fat: 0.0,
  47.       carbs: 94,
  48.       protein: 0.0,
  49.       iron: '0%',
  50.     },
  51.     {
  52.       name: 'Lollipop',
  53.       calories: 392,
  54.       fat: 0.2,
  55.       carbs: 98,
  56.       protein: 0,
  57.       iron: '2%',
  58.     },
  59.     {
  60.       name: 'Honeycomb',
  61.       calories: 408,
  62.       fat: 3.2,
  63.       carbs: 87,
  64.       protein: 6.5,
  65.       iron: '45%',
  66.     },
  67.     {
  68.       name: 'Donut',
  69.       calories: 452,
  70.       fat: 25.0,
  71.       carbs: 51,
  72.       protein: 4.9,
  73.       iron: '22%',
  74.     },
  75.     {
  76.       name: 'KitKat',
  77.       calories: 518,
  78.       fat: 26.0,
  79.       carbs: 65,
  80.       protein: 7,
  81.       iron: '6%',
  82.     },
  83.   ]
  85.   export default {
  86.     data () {
  87.       return {
  88.         enabled: null,
  89.         items: desserts,
  90.         search: null,
  91.         slots: [
  92.           'body',
  93.           'body.append',
  94.           'body.prepend',
  95.           'footer',
  96.           'header.data-table-select',
  97.           'header',
  98.           'progress',
  99.           'item.data-table-select',
  100.           'item.<name>',
  101.           'no-data',
  102.           'no-results',
  103.           'top',
  104.         ],
  105.         headers: [
  106.           {
  107.             text: 'Dessert (100g serving)',
  108.             align: 'start',
  109.             sortable: false,
  110.             value: 'name',
  111.           },
  112.           { text: 'Calories', value: 'calories' },
  113.           { text: 'Fat (g)', value: 'fat' },
  114.           { text: 'Carbs (g)', value: 'carbs' },
  115.           { text: 'Protein (g)', value: 'protein' },
  116.           { text: 'Iron (%)', value: 'iron' },
  117.         ],
  118.       }
  119.     },
  121.     computed: {
  122.       showSelect () {
  123.         return this.isEnabled('header.data-table-select') || this.isEnabled('item.data-table-select')
  124.       },
  125.       hideHeaders () {
  126.         return !this.showSelect
  127.       },
  128.       isLoading () {
  129.         return this.isEnabled('progress')
  130.       },
  131.     },
  133.     watch: {
  134.       enabled (slot) {
  135.         if (slot === 'no-data') {
  136.           this.items = []
  137.         } else if (slot === 'no-results') {
  138.           this.search = '...'
  139.         } else {
  140.           this.search = null
  141.           this.items = desserts
  142.         }
  143.       },
  144.     },
  146.     methods: {
  147.       isEnabled (slot) {
  148.         return this.enabled === slot
  149.       },
  150.     },
  151.   }
  152. </script>

Data tables（数据表格）updated - 图12

Vue Jobs

Sign up and post a job or create your personalized developer profile at vuejobs.com.

ads by Vuetify

](https://vuejobs.com/?ref=vuetifyjs.com&ref=vuetify)

简单复选框

当想在你的数据表中的插槽模板中使用复选框组件时，请使用 v-simple-checkbox 组件，而不是 v-checkbox 组件。v-simple-checkbox 组件是内部使用的，并且会将表头对齐。

template script

  1. <template>
  2.   <div>
  3.     <v-data-table
  4.       :headers="headers"
  5.       :items="desserts"
  6.       class="elevation-1"
  7.     >
  8.       <template v-slot:item.glutenfree="{ item }">
  9.         <v-simple-checkbox v-model="item.glutenfree" disabled></v-simple-checkbox>
  10.       </template>
  11.     </v-data-table>
  12.   </div>
  13. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         desserts: [
  6.           {
  7.             name: 'Frozen Yogurt',
  8.             calories: 159,
  9.             fat: 6.0,
  10.             carbs: 24,
  11.             protein: 4.0,
  12.             iron: '1%',
  13.             glutenfree: true,
  14.           },
  15.           {
  16.             name: 'Ice cream sandwich',
  17.             calories: 237,
  18.             fat: 9.0,
  19.             carbs: 37,
  20.             protein: 4.3,
  21.             iron: '1%',
  22.             glutenfree: false,
  23.           },
  24.           {
  25.             name: 'Eclair',
  26.             calories: 262,
  27.             fat: 16.0,
  28.             carbs: 23,
  29.             protein: 6.0,
  30.             iron: '7%',
  31.             glutenfree: false,
  32.           },
  33.           {
  34.             name: 'Jelly bean',
  35.             calories: 375,
  36.             fat: 0.0,
  37.             carbs: 94,
  38.             protein: 0.0,
  39.             iron: '0%',
  40.             glutenfree: true,
  41.           },
  42.           {
  43.             name: 'Lollipop',
  44.             calories: 392,
  45.             fat: 0.2,
  46.             carbs: 98,
  47.             protein: 0,
  48.             iron: '2%',
  49.             glutenfree: true,
  50.           },
  51.           {
  52.             name: 'KitKat',
  53.             calories: 518,
  54.             fat: 26.0,
  55.             carbs: 65,
  56.             protein: 7,
  57.             iron: '6%',
  58.             glutenfree: false,
  59.           },
  60.         ],
  61.         headers: [
  62.           {
  63.             text: 'Dessert (100g serving)',
  64.             align: 'start',
  65.             sortable: false,
  66.             value: 'name',
  67.           },
  68.           { text: 'Calories', value: 'calories' },
  69.           { text: 'Fat (g)', value: 'fat' },
  70.           { text: 'Carbs (g)', value: 'carbs' },
  71.           { text: 'Protein (g)', value: 'protein' },
  72.           { text: 'Iron (%)', value: 'iron' },
  73.           { text: 'Gluten-Free', value: 'glutenfree' },
  74.         ],
  75.       }
  76.     },
  77.   }
  78. </script>

Data tables（数据表格）updated - 图13

可展开行

show-expand 属性将在每个默认行上呈现一个展开图标。 您可以使用 item.data-table-expand 插槽自定义。 可以通过在标题数组中添加一个带有 value: 'data-table-expand' 的列来定制该插槽的位置。 您也可以在一次允许多个扩展行之间切换，也可以使用 single-expand 属性只允许一个扩展行之间切换。 展开的行在同步属性 expanded.sync 上可用

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     :single-expand="singleExpand"
  6.     :expanded.sync="expanded"
  7.     item-key="name"
  8.     show-expand
  9.     class="elevation-1"
  10.   >
  11.     <template v-slot:top>
  12.       <v-toolbar flat>
  13.         <v-toolbar-title>Expandable Table</v-toolbar-title>
  14.         <v-spacer></v-spacer>
  15.         <v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>
  16.       </v-toolbar>
  17.     </template>
  18.     <template v-slot:expanded-item="{ headers, item }">
  19.       <td :colspan="headers.length">More info about {{ item.name }}</td>
  20.     </template>
  21.   </v-data-table>
  22. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         expanded: [],
  6.         singleExpand: false,
  7.         headers: [
  8.           {
  9.             text: 'Dessert (100g serving)',
  10.             align: 'start',
  11.             sortable: false,
  12.             value: 'name',
  13.           },
  14.           { text: 'Calories', value: 'calories' },
  15.           { text: 'Fat (g)', value: 'fat' },
  16.           { text: 'Carbs (g)', value: 'carbs' },
  17.           { text: 'Protein (g)', value: 'protein' },
  18.           { text: 'Iron (%)', value: 'iron' },
  19.           { text: '', value: 'data-table-expand' },
  20.         ],
  21.         desserts: [
  22.           {
  23.             name: 'Frozen Yogurt',
  24.             calories: 159,
  25.             fat: 6.0,
  26.             carbs: 24,
  27.             protein: 4.0,
  28.             iron: '1%',
  29.           },
  30.           {
  31.             name: 'Ice cream sandwich',
  32.             calories: 237,
  33.             fat: 9.0,
  34.             carbs: 37,
  35.             protein: 4.3,
  36.             iron: '1%',
  37.           },
  38.           {
  39.             name: 'Eclair',
  40.             calories: 262,
  41.             fat: 16.0,
  42.             carbs: 23,
  43.             protein: 6.0,
  44.             iron: '7%',
  45.           },
  46.           {
  47.             name: 'Cupcake',
  48.             calories: 305,
  49.             fat: 3.7,
  50.             carbs: 67,
  51.             protein: 4.3,
  52.             iron: '8%',
  53.           },
  54.           {
  55.             name: 'Gingerbread',
  56.             calories: 356,
  57.             fat: 16.0,
  58.             carbs: 49,
  59.             protein: 3.9,
  60.             iron: '16%',
  61.           },
  62.           {
  63.             name: 'Jelly bean',
  64.             calories: 375,
  65.             fat: 0.0,
  66.             carbs: 94,
  67.             protein: 0.0,
  68.             iron: '0%',
  69.           },
  70.           {
  71.             name: 'Lollipop',
  72.             calories: 392,
  73.             fat: 0.2,
  74.             carbs: 98,
  75.             protein: 0,
  76.             iron: '2%',
  77.           },
  78.           {
  79.             name: 'Honeycomb',
  80.             calories: 408,
  81.             fat: 3.2,
  82.             carbs: 87,
  83.             protein: 6.5,
  84.             iron: '45%',
  85.           },
  86.           {
  87.             name: 'Donut',
  88.             calories: 452,
  89.             fat: 25.0,
  90.             carbs: 51,
  91.             protein: 4.9,
  92.             iron: '22%',
  93.           },
  94.           {
  95.             name: 'KitKat',
  96.             calories: 518,
  97.             fat: 26.0,
  98.             carbs: 65,
  99.             protein: 7,
  100.             iron: '6%',
  101.           },
  102.         ],
  103.       }
  104.     },
  105.   }
  106. </script>

Data tables（数据表格）updated - 图14

自定义过滤

您可以通过为 custom-filter 属性提供函数来覆盖 search 属性所使用的默认过滤。 如果您需要自定义特定列的过滤，则可以在标头项目的 filter 属性中提供函数。 标识是 (value: any, search: string | null, item: any) => boolean。 即使未提供 search 属性，该功能也将始终运行。 因此，如果不应用过滤器，则需要确保以值 true 提前退出。

template script

  1. <template>
  2.   <div>
  3.     <v-data-table
  4.       :headers="headers"
  5.       :items="desserts"
  6.       item-key="name"
  7.       class="elevation-1"
  8.       :search="search"
  9.       :custom-filter="filterOnlyCapsText"
  10.     >
  11.       <template v-slot:top>
  12.         <v-text-field v-model="search" label="Search (UPPER CASE ONLY)" class="mx-4"></v-text-field>
  13.       </template>
  14.       <template v-slot:body.append>
  15.         <tr>
  16.           <td></td>
  17.           <td>
  18.             <v-text-field v-model="calories" type="number" label="Less than"></v-text-field>
  19.           </td>
  20.           <td colspan="4"></td>
  21.         </tr>
  22.       </template>
  23.     </v-data-table>
  24.   </div>
  25. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         search: '',
  6.         calories: '',
  7.         desserts: [
  8.           {
  9.             name: 'Frozen Yogurt',
  10.             calories: 159,
  11.             fat: 6.0,
  12.             carbs: 24,
  13.             protein: 4.0,
  14.             iron: '1%',
  15.           },
  16.           {
  17.             name: 'Ice cream sandwich',
  18.             calories: 237,
  19.             fat: 9.0,
  20.             carbs: 37,
  21.             protein: 4.3,
  22.             iron: '1%',
  23.           },
  24.           {
  25.             name: 'Eclair',
  26.             calories: 262,
  27.             fat: 16.0,
  28.             carbs: 23,
  29.             protein: 6.0,
  30.             iron: '7%',
  31.           },
  32.           {
  33.             name: 'Cupcake',
  34.             calories: 305,
  35.             fat: 3.7,
  36.             carbs: 67,
  37.             protein: 4.3,
  38.             iron: '8%',
  39.           },
  40.           {
  41.             name: 'Gingerbread',
  42.             calories: 356,
  43.             fat: 16.0,
  44.             carbs: 49,
  45.             protein: 3.9,
  46.             iron: '16%',
  47.           },
  48.           {
  49.             name: 'Jelly bean',
  50.             calories: 375,
  51.             fat: 0.0,
  52.             carbs: 94,
  53.             protein: 0.0,
  54.             iron: '0%',
  55.           },
  56.           {
  57.             name: 'Lollipop',
  58.             calories: 392,
  59.             fat: 0.2,
  60.             carbs: 98,
  61.             protein: 0,
  62.             iron: '2%',
  63.           },
  64.           {
  65.             name: 'Honeycomb',
  66.             calories: 408,
  67.             fat: 3.2,
  68.             carbs: 87,
  69.             protein: 6.5,
  70.             iron: '45%',
  71.           },
  72.           {
  73.             name: 'Donut',
  74.             calories: 452,
  75.             fat: 25.0,
  76.             carbs: 51,
  77.             protein: 4.9,
  78.             iron: '22%',
  79.           },
  80.           {
  81.             name: 'KitKat',
  82.             calories: 518,
  83.             fat: 26.0,
  84.             carbs: 65,
  85.             protein: 7,
  86.             iron: '6%',
  87.           },
  88.         ],
  89.       }
  90.     },
  91.     computed: {
  92.       headers () {
  93.         return [
  94.           {
  95.             text: 'Dessert (100g serving)',
  96.             align: 'start',
  97.             sortable: false,
  98.             value: 'name',
  99.           },
  100.           {
  101.             text: 'Calories',
  102.             value: 'calories',
  103.             filter: value => {
  104.               if (!this.calories) return true
  106.               return value < parseInt(this.calories)
  107.             },
  108.           },
  109.           { text: 'Fat (g)', value: 'fat' },
  110.           { text: 'Carbs (g)', value: 'carbs' },
  111.           { text: 'Protein (g)', value: 'protein' },
  112.           { text: 'Iron (%)', value: 'iron' },
  113.         ]
  114.       },
  115.     },
  116.     methods: {
  117.       filterOnlyCapsText (value, search, item) {
  118.         return value != null &&
  119.           search != null &&
  120.           typeof value === 'string' &&
  121.           value.toString().toLocaleUpperCase().indexOf(search) !== -1
  122.       },
  123.     },
  124.   }
  125. </script>

Data tables（数据表格）updated - 图15

自定义默认头部

您可以使用 header.<name> 的动态插槽来仅自定义某些列。 <name> 是发送到 headers 的相应标题项中 value 属性的名称。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     class="elevation-1"
  6.   >
  7.     <template v-slot:header.name="{ header }">
  8.       {{ header.text.toUpperCase() }}
  9.     </template>
  10.   </v-data-table>
  11. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       headers: [
  5.         {
  6.           text: 'Dessert (100g serving)',
  7.           align: 'start',
  8.           value: 'name',
  9.         },
  10.         { text: 'Calories', value: 'calories' },
  11.         { text: 'Fat (g)', value: 'fat' },
  12.         { text: 'Carbs (g)', value: 'carbs' },
  13.         { text: 'Protein (g)', value: 'protein' },
  14.         { text: 'Iron (%)', value: 'iron' },
  15.       ],
  16.       desserts: [
  17.         {
  18.           name: 'Frozen Yogurt',
  19.           calories: 159,
  20.           fat: 6.0,
  21.           carbs: 24,
  22.           protein: 4.0,
  23.           iron: '1%',
  24.         },
  25.         {
  26.           name: 'Ice cream sandwich',
  27.           calories: 237,
  28.           fat: 9.0,
  29.           carbs: 37,
  30.           protein: 4.3,
  31.           iron: '1%',
  32.         },
  33.         {
  34.           name: 'Eclair',
  35.           calories: 262,
  36.           fat: 16.0,
  37.           carbs: 23,
  38.           protein: 6.0,
  39.           iron: '7%',
  40.         },
  41.         {
  42.           name: 'Cupcake',
  43.           calories: 305,
  44.           fat: 3.7,
  45.           carbs: 67,
  46.           protein: 4.3,
  47.           iron: '8%',
  48.         },
  49.         {
  50.           name: 'Gingerbread',
  51.           calories: 356,
  52.           fat: 16.0,
  53.           carbs: 49,
  54.           protein: 3.9,
  55.           iron: '16%',
  56.         },
  57.         {
  58.           name: 'Jelly bean',
  59.           calories: 375,
  60.           fat: 0.0,
  61.           carbs: 94,
  62.           protein: 0.0,
  63.           iron: '0%',
  64.         },
  65.         {
  66.           name: 'Lollipop',
  67.           calories: 392,
  68.           fat: 0.2,
  69.           carbs: 98,
  70.           protein: 0,
  71.           iron: '2%',
  72.         },
  73.         {
  74.           name: 'Honeycomb',
  75.           calories: 408,
  76.           fat: 3.2,
  77.           carbs: 87,
  78.           protein: 6.5,
  79.           iron: '45%',
  80.         },
  81.         {
  82.           name: 'Donut',
  83.           calories: 452,
  84.           fat: 25.0,
  85.           carbs: 51,
  86.           protein: 4.9,
  87.           iron: '22%',
  88.         },
  89.         {
  90.           name: 'KitKat',
  91.           calories: 518,
  92.           fat: 26.0,
  93.           carbs: 65,
  94.           protein: 7,
  95.           iron: '6%',
  96.         },
  97.       ],
  98.     }),
  99.   }
  100. </script>

Data tables（数据表格）updated - 图16

自定义默认行

您可以使用动态插槽 item.<name> 仅自定义某些列。<name> 是发送到 headers 的相应标题项中 value 属性的名称。 因此，要自定义 calories 列，我们使用 item.calories 插槽。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     class="elevation-1"
  6.   >
  7.     <template v-slot:item.calories="{ item }">
  8.       <v-chip :color="getColor(item.calories)" dark>{{ item.calories }}</v-chip>
  9.     </template>
  10.   </v-data-table>
  11. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         headers: [
  6.           {
  7.             text: 'Dessert (100g serving)',
  8.             align: 'start',
  9.             sortable: false,
  10.             value: 'name',
  11.           },
  12.           { text: 'Calories', value: 'calories' },
  13.           { text: 'Fat (g)', value: 'fat' },
  14.           { text: 'Carbs (g)', value: 'carbs' },
  15.           { text: 'Protein (g)', value: 'protein' },
  16.           { text: 'Iron (%)', value: 'iron' },
  17.         ],
  18.         desserts: [
  19.           {
  20.             name: 'Frozen Yogurt',
  21.             calories: 159,
  22.             fat: 6.0,
  23.             carbs: 24,
  24.             protein: 4.0,
  25.             iron: '1%',
  26.           },
  27.           {
  28.             name: 'Ice cream sandwich',
  29.             calories: 237,
  30.             fat: 9.0,
  31.             carbs: 37,
  32.             protein: 4.3,
  33.             iron: '1%',
  34.           },
  35.           {
  36.             name: 'Eclair',
  37.             calories: 262,
  38.             fat: 16.0,
  39.             carbs: 23,
  40.             protein: 6.0,
  41.             iron: '7%',
  42.           },
  43.           {
  44.             name: 'Cupcake',
  45.             calories: 305,
  46.             fat: 3.7,
  47.             carbs: 67,
  48.             protein: 4.3,
  49.             iron: '8%',
  50.           },
  51.           {
  52.             name: 'Gingerbread',
  53.             calories: 356,
  54.             fat: 16.0,
  55.             carbs: 49,
  56.             protein: 3.9,
  57.             iron: '16%',
  58.           },
  59.           {
  60.             name: 'Jelly bean',
  61.             calories: 375,
  62.             fat: 0.0,
  63.             carbs: 94,
  64.             protein: 0.0,
  65.             iron: '0%',
  66.           },
  67.           {
  68.             name: 'Lollipop',
  69.             calories: 392,
  70.             fat: 0.2,
  71.             carbs: 98,
  72.             protein: 0,
  73.             iron: '2%',
  74.           },
  75.           {
  76.             name: 'Honeycomb',
  77.             calories: 408,
  78.             fat: 3.2,
  79.             carbs: 87,
  80.             protein: 6.5,
  81.             iron: '45%',
  82.           },
  83.           {
  84.             name: 'Donut',
  85.             calories: 452,
  86.             fat: 25.0,
  87.             carbs: 51,
  88.             protein: 4.9,
  89.             iron: '22%',
  90.           },
  91.           {
  92.             name: 'KitKat',
  93.             calories: 518,
  94.             fat: 26.0,
  95.             carbs: 65,
  96.             protein: 7,
  97.             iron: '6%',
  98.           },
  99.         ],
  100.       }
  101.     },
  102.     methods: {
  103.       getColor (calories) {
  104.         if (calories > 400) return 'red'
  105.         else if (calories > 200) return 'orange'
  106.         else return 'green'
  107.       },
  108.     },
  109.   }
  110. </script>

Data tables（数据表格）updated - 图17

外部分页

分页可以通过 pagination 属性在外部控制，切记使用时必须应用 .sync 修饰符。

template script

  1. <template>
  2.   <div>
  3.     <v-data-table
  4.       :headers="headers"
  5.       :items="desserts"
  6.       :page.sync="page"
  7.       :items-per-page="itemsPerPage"
  8.       hide-default-footer
  9.       class="elevation-1"
  10.       @page-count="pageCount = $event"
  11.     ></v-data-table>
  12.     <div class="text-center pt-2">
  13.       <v-pagination v-model="page" :length="pageCount"></v-pagination>
  14.       <v-text-field
  15.         :value="itemsPerPage"
  16.         label="Items per page"
  17.         type="number"
  18.         min="-1"
  19.         max="15"
  20.         @input="itemsPerPage = parseInt($event, 10)"
  21.       ></v-text-field>
  22.     </div>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         page: 1,
  6.         pageCount: 0,
  7.         itemsPerPage: 10,
  8.         headers: [
  9.           {
  10.             text: 'Dessert (100g serving)',
  11.             align: 'start',
  12.             sortable: false,
  13.             value: 'name',
  14.           },
  15.           { text: 'Calories', value: 'calories' },
  16.           { text: 'Fat (g)', value: 'fat' },
  17.           { text: 'Carbs (g)', value: 'carbs' },
  18.           { text: 'Protein (g)', value: 'protein' },
  19.           { text: 'Iron (%)', value: 'iron' },
  20.         ],
  21.         desserts: [
  22.           {
  23.             name: 'Frozen Yogurt',
  24.             calories: 159,
  25.             fat: 6.0,
  26.             carbs: 24,
  27.             protein: 4.0,
  28.             iron: '1%',
  29.           },
  30.           {
  31.             name: 'Ice cream sandwich',
  32.             calories: 237,
  33.             fat: 9.0,
  34.             carbs: 37,
  35.             protein: 4.3,
  36.             iron: '1%',
  37.           },
  38.           {
  39.             name: 'Eclair',
  40.             calories: 262,
  41.             fat: 16.0,
  42.             carbs: 23,
  43.             protein: 6.0,
  44.             iron: '7%',
  45.           },
  46.           {
  47.             name: 'Cupcake',
  48.             calories: 305,
  49.             fat: 3.7,
  50.             carbs: 67,
  51.             protein: 4.3,
  52.             iron: '8%',
  53.           },
  54.           {
  55.             name: 'Gingerbread',
  56.             calories: 356,
  57.             fat: 16.0,
  58.             carbs: 49,
  59.             protein: 3.9,
  60.             iron: '16%',
  61.           },
  62.           {
  63.             name: 'Jelly bean',
  64.             calories: 375,
  65.             fat: 0.0,
  66.             carbs: 94,
  67.             protein: 0.0,
  68.             iron: '0%',
  69.           },
  70.           {
  71.             name: 'Lollipop',
  72.             calories: 392,
  73.             fat: 0.2,
  74.             carbs: 98,
  75.             protein: 0,
  76.             iron: '2%',
  77.           },
  78.           {
  79.             name: 'Honeycomb',
  80.             calories: 408,
  81.             fat: 3.2,
  82.             carbs: 87,
  83.             protein: 6.5,
  84.             iron: '45%',
  85.           },
  86.           {
  87.             name: 'Donut',
  88.             calories: 452,
  89.             fat: 25.0,
  90.             carbs: 51,
  91.             protein: 4.9,
  92.             iron: '22%',
  93.           },
  94.           {
  95.             name: 'KitKat',
  96.             calories: 518,
  97.             fat: 26.0,
  98.             carbs: 65,
  99.             protein: 7,
  100.             iron: '6%',
  101.           },
  102.         ],
  103.       }
  104.     },
  105.   }
  106. </script>

Data tables（数据表格）updated - 图18

外部排序

排序也同样可以通过 pagination 属性在外部控制，也必须使用 .sync 修饰符。你也可以使用该属性设置默认的排序序列。

template script

  1. <template>
  2.   <div>
  3.     <v-data-table
  4.       :headers="headers"
  5.       :items="desserts"
  6.       :sort-by.sync="sortBy"
  7.       :sort-desc.sync="sortDesc"
  8.       class="elevation-1"
  9.     ></v-data-table>
  10.     <div class="text-center pt-2">
  11.       <v-btn color="primary" class="mr-2" @click="toggleOrder">Toggle sort order</v-btn>
  12.       <v-btn color="primary" @click="nextSort">Sort next column</v-btn>
  13.     </div>
  14.   </div>
  15. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         sortBy: 'fat',
  6.         sortDesc: false,
  7.         headers: [
  8.           {
  9.             text: 'Dessert (100g serving)',
  10.             align: 'start',
  11.             value: 'name',
  12.           },
  13.           { text: 'Calories', value: 'calories' },
  14.           { text: 'Fat (g)', value: 'fat' },
  15.           { text: 'Carbs (g)', value: 'carbs' },
  16.           { text: 'Protein (g)', value: 'protein' },
  17.           { text: 'Iron (%)', value: 'iron' },
  18.         ],
  19.         desserts: [
  20.           {
  21.             name: 'Frozen Yogurt',
  22.             calories: 159,
  23.             fat: 6.0,
  24.             carbs: 24,
  25.             protein: 4.0,
  26.             iron: '1%',
  27.           },
  28.           {
  29.             name: 'Ice cream sandwich',
  30.             calories: 237,
  31.             fat: 9.0,
  32.             carbs: 37,
  33.             protein: 4.3,
  34.             iron: '1%',
  35.           },
  36.           {
  37.             name: 'Eclair',
  38.             calories: 262,
  39.             fat: 16.0,
  40.             carbs: 23,
  41.             protein: 6.0,
  42.             iron: '7%',
  43.           },
  44.           {
  45.             name: 'Cupcake',
  46.             calories: 305,
  47.             fat: 3.7,
  48.             carbs: 67,
  49.             protein: 4.3,
  50.             iron: '8%',
  51.           },
  52.           {
  53.             name: 'Gingerbread',
  54.             calories: 356,
  55.             fat: 16.0,
  56.             carbs: 49,
  57.             protein: 3.9,
  58.             iron: '16%',
  59.           },
  60.           {
  61.             name: 'Jelly bean',
  62.             calories: 375,
  63.             fat: 0.0,
  64.             carbs: 94,
  65.             protein: 0.0,
  66.             iron: '0%',
  67.           },
  68.           {
  69.             name: 'Lollipop',
  70.             calories: 392,
  71.             fat: 0.2,
  72.             carbs: 98,
  73.             protein: 0,
  74.             iron: '2%',
  75.           },
  76.           {
  77.             name: 'Honeycomb',
  78.             calories: 408,
  79.             fat: 3.2,
  80.             carbs: 87,
  81.             protein: 6.5,
  82.             iron: '45%',
  83.           },
  84.           {
  85.             name: 'Donut',
  86.             calories: 452,
  87.             fat: 25.0,
  88.             carbs: 51,
  89.             protein: 4.9,
  90.             iron: '22%',
  91.           },
  92.           {
  93.             name: 'KitKat',
  94.             calories: 518,
  95.             fat: 26.0,
  96.             carbs: 65,
  97.             protein: 7,
  98.             iron: '6%',
  99.           },
  100.         ],
  101.       }
  102.     },
  103.     methods: {
  104.       toggleOrder () {
  105.         this.sortDesc = !this.sortDesc
  106.       },
  107.       nextSort () {
  108.         let index = this.headers.findIndex(h => h.value === this.sortBy)
  109.         index = (index + 1) % this.headers.length
  110.         this.sortBy = this.headers[index].value
  111.       },
  112.     },
  113.   }
  114. </script>

Data tables（数据表格）updated - 图19

服务端分页和排序

如果要加载已经从后端进行分页和排序的数据，则可以使用 server-items-length 属性。 定义此属性将禁用内置的排序和分页功能，而您需要使用可用的事件（update:page, update:sortBy, update:options, 等）来知道何时请求新的后端的页面。 在获取数据时，使用 loading 属性显示进度条。

template script

  1. <template>
  2.   <div>
  3.     <v-data-table
  4.       :headers="headers"
  5.       :items="desserts"
  6.       :options.sync="options"
  7.       :server-items-length="totalDesserts"
  8.       :loading="loading"
  9.       class="elevation-1"
  10.     ></v-data-table>
  11.   </div>
  12. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         totalDesserts: 0,
  6.         desserts: [],
  7.         loading: true,
  8.         options: {},
  9.         headers: [
  10.           {
  11.             text: 'Dessert (100g serving)',
  12.             align: 'start',
  13.             sortable: false,
  14.             value: 'name',
  15.           },
  16.           { text: 'Calories', value: 'calories' },
  17.           { text: 'Fat (g)', value: 'fat' },
  18.           { text: 'Carbs (g)', value: 'carbs' },
  19.           { text: 'Protein (g)', value: 'protein' },
  20.           { text: 'Iron (%)', value: 'iron' },
  21.         ],
  22.       }
  23.     },
  24.     watch: {
  25.       options: {
  26.         handler () {
  27.           this.getDataFromApi()
  28.             .then(data => {
  29.               this.desserts = data.items
  30.               this.totalDesserts = data.total
  31.             })
  32.         },
  33.         deep: true,
  34.       },
  35.     },
  36.     mounted () {
  37.       this.getDataFromApi()
  38.         .then(data => {
  39.           this.desserts = data.items
  40.           this.totalDesserts = data.total
  41.         })
  42.     },
  43.     methods: {
  44.       getDataFromApi () {
  45.         this.loading = true
  46.         return new Promise((resolve, reject) => {
  47.           const { sortBy, sortDesc, page, itemsPerPage } = this.options
  49.           let items = this.getDesserts()
  50.           const total = items.length
  52.           if (sortBy.length === 1 && sortDesc.length === 1) {
  53.             items = items.sort((a, b) => {
  54.               const sortA = a[sortBy[0]]
  55.               const sortB = b[sortBy[0]]
  57.               if (sortDesc[0]) {
  58.                 if (sortA < sortB) return 1
  59.                 if (sortA > sortB) return -1
  60.                 return 0
  61.               } else {
  62.                 if (sortA < sortB) return -1
  63.                 if (sortA > sortB) return 1
  64.                 return 0
  65.               }
  66.             })
  67.           }
  69.           if (itemsPerPage > 0) {
  70.             items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
  71.           }
  73.           setTimeout(() => {
  74.             this.loading = false
  75.             resolve({
  76.               items,
  77.               total,
  78.             })
  79.           }, 1000)
  80.         })
  81.       },
  82.       getDesserts () {
  83.         return [
  84.           {
  85.             name: 'Frozen Yogurt',
  86.             calories: 159,
  87.             fat: 6.0,
  88.             carbs: 24,
  89.             protein: 4.0,
  90.             iron: '1%',
  91.           },
  92.           {
  93.             name: 'Ice cream sandwich',
  94.             calories: 237,
  95.             fat: 9.0,
  96.             carbs: 37,
  97.             protein: 4.3,
  98.             iron: '1%',
  99.           },
  100.           {
  101.             name: 'Eclair',
  102.             calories: 262,
  103.             fat: 16.0,
  104.             carbs: 23,
  105.             protein: 6.0,
  106.             iron: '7%',
  107.           },
  108.           {
  109.             name: 'Cupcake',
  110.             calories: 305,
  111.             fat: 3.7,
  112.             carbs: 67,
  113.             protein: 4.3,
  114.             iron: '8%',
  115.           },
  116.           {
  117.             name: 'Gingerbread',
  118.             calories: 356,
  119.             fat: 16.0,
  120.             carbs: 49,
  121.             protein: 3.9,
  122.             iron: '16%',
  123.           },
  124.           {
  125.             name: 'Jelly bean',
  126.             calories: 375,
  127.             fat: 0.0,
  128.             carbs: 94,
  129.             protein: 0.0,
  130.             iron: '0%',
  131.           },
  132.           {
  133.             name: 'Lollipop',
  134.             calories: 392,
  135.             fat: 0.2,
  136.             carbs: 98,
  137.             protein: 0,
  138.             iron: '2%',
  139.           },
  140.           {
  141.             name: 'Honeycomb',
  142.             calories: 408,
  143.             fat: 3.2,
  144.             carbs: 87,
  145.             protein: 6.5,
  146.             iron: '45%',
  147.           },
  148.           {
  149.             name: 'Donut',
  150.             calories: 452,
  151.             fat: 25.0,
  152.             carbs: 51,
  153.             protein: 4.9,
  154.             iron: '22%',
  155.           },
  156.           {
  157.             name: 'KitKat',
  158.             calories: 518,
  159.             fat: 26.0,
  160.             carbs: 65,
  161.             protein: 7,
  162.             iron: '6%',
  163.           },
  164.         ]
  165.       },
  166.     },
  167.   }
  168. </script>

Data tables（数据表格）updated - 图20

内容编辑

v-edit-dialog 组件可用于直接在 v-data-table 中编辑数据。 您可以通过添加 persistent 属性来阻止在外部点击 v-edit-dialog 时关闭。

template script

  1. <template>
  2.   <div>
  3.     <v-data-table
  4.       :headers="headers"
  5.       :items="desserts"
  6.     >
  7.       <template v-slot:item.name="props">
  8.         <v-edit-dialog
  9.           :return-value.sync="props.item.name"
  10.           @save="save"
  11.           @cancel="cancel"
  12.           @open="open"
  13.           @close="close"
  14.         > {{ props.item.name }}
  15.           <template v-slot:input>
  16.             <v-text-field
  17.               v-model="props.item.name"
  18.               :rules="[max25chars]"
  19.               label="Edit"
  20.               single-line
  21.               counter
  22.             ></v-text-field>
  23.           </template>
  24.         </v-edit-dialog>
  25.       </template>
  26.       <template v-slot:item.iron="props">
  27.         <v-edit-dialog
  28.           :return-value.sync="props.item.iron"
  29.           large
  30.           persistent
  31.           @save="save"
  32.           @cancel="cancel"
  33.           @open="open"
  34.           @close="close"
  35.         >
  36.           <div>{{ props.item.iron }}</div>
  37.           <template v-slot:input>
  38.             <div class="mt-4 title">Update Iron</div>
  39.           </template>
  40.           <template v-slot:input>
  41.             <v-text-field
  42.               v-model="props.item.iron"
  43.               :rules="[max25chars]"
  44.               label="Edit"
  45.               single-line
  46.               counter
  47.               autofocus
  48.             ></v-text-field>
  49.           </template>
  50.         </v-edit-dialog>
  51.       </template>
  52.     </v-data-table>
  54.     <v-snackbar v-model="snack" :timeout="3000" :color="snackColor">
  55.       {{ snackText }}
  56.       <v-btn text @click="snack = false">Close</v-btn>
  57.     </v-snackbar>
  58.   </div>
  59. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         snack: false,
  6.         snackColor: '',
  7.         snackText: '',
  8.         max25chars: v => v.length <= 25 || 'Input too long!',
  9.         pagination: {},
  10.         headers: [
  11.           {
  12.             text: 'Dessert (100g serving)',
  13.             align: 'start',
  14.             sortable: false,
  15.             value: 'name',
  16.           },
  17.           { text: 'Calories', value: 'calories' },
  18.           { text: 'Fat (g)', value: 'fat' },
  19.           { text: 'Carbs (g)', value: 'carbs' },
  20.           { text: 'Protein (g)', value: 'protein' },
  21.           { text: 'Iron (%)', value: 'iron' },
  22.         ],
  23.         desserts: [
  24.           {
  25.             name: 'Frozen Yogurt',
  26.             calories: 159,
  27.             fat: 6.0,
  28.             carbs: 24,
  29.             protein: 4.0,
  30.             iron: '1%',
  31.           },
  32.           {
  33.             name: 'Ice cream sandwich',
  34.             calories: 237,
  35.             fat: 9.0,
  36.             carbs: 37,
  37.             protein: 4.3,
  38.             iron: '1%',
  39.           },
  40.           {
  41.             name: 'Eclair',
  42.             calories: 262,
  43.             fat: 16.0,
  44.             carbs: 23,
  45.             protein: 6.0,
  46.             iron: '7%',
  47.           },
  48.           {
  49.             name: 'Cupcake',
  50.             calories: 305,
  51.             fat: 3.7,
  52.             carbs: 67,
  53.             protein: 4.3,
  54.             iron: '8%',
  55.           },
  56.           {
  57.             name: 'Gingerbread',
  58.             calories: 356,
  59.             fat: 16.0,
  60.             carbs: 49,
  61.             protein: 3.9,
  62.             iron: '16%',
  63.           },
  64.           {
  65.             name: 'Jelly bean',
  66.             calories: 375,
  67.             fat: 0.0,
  68.             carbs: 94,
  69.             protein: 0.0,
  70.             iron: '0%',
  71.           },
  72.           {
  73.             name: 'Lollipop',
  74.             calories: 392,
  75.             fat: 0.2,
  76.             carbs: 98,
  77.             protein: 0,
  78.             iron: '2%',
  79.           },
  80.           {
  81.             name: 'Honeycomb',
  82.             calories: 408,
  83.             fat: 3.2,
  84.             carbs: 87,
  85.             protein: 6.5,
  86.             iron: '45%',
  87.           },
  88.           {
  89.             name: 'Donut',
  90.             calories: 452,
  91.             fat: 25.0,
  92.             carbs: 51,
  93.             protein: 4.9,
  94.             iron: '22%',
  95.           },
  96.           {
  97.             name: 'KitKat',
  98.             calories: 518,
  99.             fat: 26.0,
  100.             carbs: 65,
  101.             protein: 7,
  102.             iron: '6%',
  103.           },
  104.         ],
  105.       }
  106.     },
  107.     methods: {
  108.       save () {
  109.         this.snack = true
  110.         this.snackColor = 'success'
  111.         this.snackText = 'Data saved'
  112.       },
  113.       cancel () {
  114.         this.snack = true
  115.         this.snackColor = 'error'
  116.         this.snackText = 'Canceled'
  117.       },
  118.       open () {
  119.         this.snack = true
  120.         this.snackColor = 'info'
  121.         this.snackText = 'Dialog opened'
  122.       },
  123.       close () {
  124.         console.log('Dialog closed')
  125.       },
  126.     },
  127.   }
  128. </script>

Data tables（数据表格）updated - 图21

CRUD 操作

数据表格使用 v-dialog 组件来进行每行的 CRUD 操作。

template script

  1. <template>
  2.   <v-data-table
  3.     :headers="headers"
  4.     :items="desserts"
  5.     sort-by="calories"
  6.     class="elevation-1"
  7.   >
  8.     <template v-slot:top>
  9.       <v-toolbar flat color="white">
  10.         <v-toolbar-title>My CRUD</v-toolbar-title>
  11.         <v-divider
  12.           class="mx-4"
  13.           inset
  14.           vertical
  15.         ></v-divider>
  16.         <v-spacer></v-spacer>
  17.         <v-dialog v-model="dialog" max-width="500px">
  18.           <template v-slot:activator="{ on }">
  19.             <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
  20.           </template>
  21.           <v-card>
  22.             <v-card-title>
  23.               <span class="headline">{{ formTitle }}</span>
  24.             </v-card-title>
  26.             <v-card-text>
  27.               <v-container>
  28.                 <v-row>
  29.                   <v-col cols="12" sm="6" md="4">
  30.                     <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
  31.                   </v-col>
  32.                   <v-col cols="12" sm="6" md="4">
  33.                     <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
  34.                   </v-col>
  35.                   <v-col cols="12" sm="6" md="4">
  36.                     <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
  37.                   </v-col>
  38.                   <v-col cols="12" sm="6" md="4">
  39.                     <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
  40.                   </v-col>
  41.                   <v-col cols="12" sm="6" md="4">
  42.                     <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
  43.                   </v-col>
  44.                 </v-row>
  45.               </v-container>
  46.             </v-card-text>
  48.             <v-card-actions>
  49.               <v-spacer></v-spacer>
  50.               <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
  51.               <v-btn color="blue darken-1" text @click="save">Save</v-btn>
  52.             </v-card-actions>
  53.           </v-card>
  54.         </v-dialog>
  55.       </v-toolbar>
  56.     </template>
  57.     <template v-slot:item.actions="{ item }">
  58.       <v-icon
  59.         small
  60.         class="mr-2"
  61.         @click="editItem(item)"
  62.       >
  63.         mdi-pencil
  64.       </v-icon>
  65.       <v-icon
  66.         small
  67.         @click="deleteItem(item)"
  68.       >
  69.         mdi-delete
  70.       </v-icon>
  71.     </template>
  72.     <template v-slot:no-data>
  73.       <v-btn color="primary" @click="initialize">Reset</v-btn>
  74.     </template>
  75.   </v-data-table>
  76. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       dialog: false,
  5.       headers: [
  6.         {
  7.           text: 'Dessert (100g serving)',
  8.           align: 'start',
  9.           sortable: false,
  10.           value: 'name',
  11.         },
  12.         { text: 'Calories', value: 'calories' },
  13.         { text: 'Fat (g)', value: 'fat' },
  14.         { text: 'Carbs (g)', value: 'carbs' },
  15.         { text: 'Protein (g)', value: 'protein' },
  16.         { text: 'Actions', value: 'actions', sortable: false },
  17.       ],
  18.       desserts: [],
  19.       editedIndex: -1,
  20.       editedItem: {
  21.         name: '',
  22.         calories: 0,
  23.         fat: 0,
  24.         carbs: 0,
  25.         protein: 0,
  26.       },
  27.       defaultItem: {
  28.         name: '',
  29.         calories: 0,
  30.         fat: 0,
  31.         carbs: 0,
  32.         protein: 0,
  33.       },
  34.     }),
  36.     computed: {
  37.       formTitle () {
  38.         return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
  39.       },
  40.     },
  42.     watch: {
  43.       dialog (val) {
  44.         val || this.close()
  45.       },
  46.     },
  48.     created () {
  49.       this.initialize()
  50.     },
  52.     methods: {
  53.       initialize () {
  54.         this.desserts = [
  55.           {
  56.             name: 'Frozen Yogurt',
  57.             calories: 159,
  58.             fat: 6.0,
  59.             carbs: 24,
  60.             protein: 4.0,
  61.           },
  62.           {
  63.             name: 'Ice cream sandwich',
  64.             calories: 237,
  65.             fat: 9.0,
  66.             carbs: 37,
  67.             protein: 4.3,
  68.           },
  69.           {
  70.             name: 'Eclair',
  71.             calories: 262,
  72.             fat: 16.0,
  73.             carbs: 23,
  74.             protein: 6.0,
  75.           },
  76.           {
  77.             name: 'Cupcake',
  78.             calories: 305,
  79.             fat: 3.7,
  80.             carbs: 67,
  81.             protein: 4.3,
  82.           },
  83.           {
  84.             name: 'Gingerbread',
  85.             calories: 356,
  86.             fat: 16.0,
  87.             carbs: 49,
  88.             protein: 3.9,
  89.           },
  90.           {
  91.             name: 'Jelly bean',
  92.             calories: 375,
  93.             fat: 0.0,
  94.             carbs: 94,
  95.             protein: 0.0,
  96.           },
  97.           {
  98.             name: 'Lollipop',
  99.             calories: 392,
  100.             fat: 0.2,
  101.             carbs: 98,
  102.             protein: 0,
  103.           },
  104.           {
  105.             name: 'Honeycomb',
  106.             calories: 408,
  107.             fat: 3.2,
  108.             carbs: 87,
  109.             protein: 6.5,
  110.           },
  111.           {
  112.             name: 'Donut',
  113.             calories: 452,
  114.             fat: 25.0,
  115.             carbs: 51,
  116.             protein: 4.9,
  117.           },
  118.           {
  119.             name: 'KitKat',
  120.             calories: 518,
  121.             fat: 26.0,
  122.             carbs: 65,
  123.             protein: 7,
  124.           },
  125.         ]
  126.       },
  128.       editItem (item) {
  129.         this.editedIndex = this.desserts.indexOf(item)
  130.         this.editedItem = Object.assign({}, item)
  131.         this.dialog = true
  132.       },
  134.       deleteItem (item) {
  135.         const index = this.desserts.indexOf(item)
  136.         confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
  137.       },
  139.       close () {
  140.         this.dialog = false
  141.         this.$nextTick(() => {
  142.           this.editedItem = Object.assign({}, this.defaultItem)
  143.           this.editedIndex = -1
  144.         })
  145.       },
  147.       save () {
  148.         if (this.editedIndex > -1) {
  149.           Object.assign(this.desserts[this.editedIndex], this.editedItem)
  150.         } else {
  151.           this.desserts.push(this.editedItem)
  152.         }
  153.         this.close()
  154.       },
  155.     },
  156.   }
  157. </script>

Data tables（数据表格）updated - 图22