简单的表格

v-simple-table 组件是围绕 <table> 元素的简单包装器组件。 在组件内部，您可以使用所有常规表格元素，例如 <thead>, <tbody>, <tr> 等。

用例

简单的表格是一个围绕着 <table> 元素的包装器组件。

template script

  1. <template>
  2.   <v-simple-table>
  3.     <template v-slot:default>
  4.       <thead>
  5.         <tr>
  6.           <th class="text-left">Name</th>
  7.           <th class="text-left">Calories</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <tr v-for="item in desserts" :key="item.name">
  12.           <td>{{ item.name }}</td>
  13.           <td>{{ item.calories }}</td>
  14.         </tr>
  15.       </tbody>
  16.     </template>
  17.   </v-simple-table>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         desserts: [
  6.           {
  7.             name: 'Frozen Yogurt',
  8.             calories: 159,
  9.           },
  10.           {
  11.             name: 'Ice cream sandwich',
  12.             calories: 237,
  13.           },
  14.           {
  15.             name: 'Eclair',
  16.             calories: 262,
  17.           },
  18.           {
  19.             name: 'Cupcake',
  20.             calories: 305,
  21.           },
  22.           {
  23.             name: 'Gingerbread',
  24.             calories: 356,
  25.           },
  26.           {
  27.             name: 'Jelly bean',
  28.             calories: 375,
  29.           },
  30.           {
  31.             name: 'Lollipop',
  32.             calories: 392,
  33.           },
  34.           {
  35.             name: 'Honeycomb',
  36.             calories: 408,
  37.           },
  38.           {
  39.             name: 'Donut',
  40.             calories: 452,
  41.           },
  42.           {
  43.             name: 'KitKat',
  44.             calories: 518,
  45.           },
  46.         ],
  47.       }
  48.     },
  49.   }
  50. </script>

Simple tables（简单的表格） - 图1

API

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

Simple tables（简单的表格） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-simple-table
  4.       :dense="dense"
  5.       :fixed-header="fixedHeader"
  6.       :height="height"
  7.     >
  8.       <template v-slot:default>
  9.         <thead>
  10.           <tr>
  11.             <th class="text-left">Name</th>
  12.             <th class="text-left">Calories</th>
  13.           </tr>
  14.         </thead>
  15.         <tbody>
  16.           <tr v-for="item in desserts" :key="item.name">
  17.             <td>{{ item.name }}</td>
  18.             <td>{{ item.calories }}</td>
  19.           </tr>
  20.         </tbody>
  21.       </template>
  22.     </v-simple-table>
  24.     <v-row>
  25.       <v-col cols="12" md="6">
  26.         <v-text-field
  27.           v-model="height"
  28.           class="mx-4"
  29.           label="Height - px"
  30.           max="500"
  31.           min="1"
  32.           step="1"
  33.           style="width: 125px"
  34.           type="number"
  35.           @keydown="false"
  36.         ></v-text-field>
  37.       </v-col>
  38.       <v-col cols="6" md="3">
  39.         <v-switch v-model="dense" label="Toggle dense" class="mx-4"></v-switch>
  40.       </v-col>
  41.       <v-col cols="6" md="3">
  42.         <v-switch v-model="fixedHeader" label="Toggle fixed-header" class="mx-4"></v-switch>
  43.       </v-col>
  44.     </v-row>
  45.   </div>
  46. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       dense: false,
  5.       fixedHeader: false,
  6.       height: 300,
  7.       desserts: [
  8.         {
  9.           name: 'Frozen Yogurt',
  10.           calories: 159,
  11.         },
  12.         {
  13.           name: 'Ice cream sandwich',
  14.           calories: 237,
  15.         },
  16.         {
  17.           name: 'Eclair',
  18.           calories: 262,
  19.         },
  20.         {
  21.           name: 'Cupcake',
  22.           calories: 305,
  23.         },
  24.         {
  25.           name: 'Gingerbread',
  26.           calories: 356,
  27.         },
  28.         {
  29.           name: 'Jelly bean',
  30.           calories: 375,
  31.         },
  32.         {
  33.           name: 'Lollipop',
  34.           calories: 392,
  35.         },
  36.         {
  37.           name: 'Honeycomb',
  38.           calories: 408,
  39.         },
  40.         {
  41.           name: 'Donut',
  42.           calories: 452,
  43.         },
  44.         {
  45.           name: 'KitKat',
  46.           calories: 518,
  47.         },
  48.       ],
  49.     }),
  50.   }
  51. </script>

Simple tables（简单的表格） - 图3

示例

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

固定高度

使用 height 属性来设置表的高度。

template script

  1. <template>
  2.   <v-simple-table height="300px">
  3.     <template v-slot:default>
  4.       <thead>
  5.         <tr>
  6.           <th class="text-left">Name</th>
  7.           <th class="text-left">Calories</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <tr v-for="item in desserts" :key="item.name">
  12.           <td>{{ item.name }}</td>
  13.           <td>{{ item.calories }}</td>
  14.         </tr>
  15.       </tbody>
  16.     </template>
  17.   </v-simple-table>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         desserts: [
  6.           {
  7.             name: 'Frozen Yogurt',
  8.             calories: 159,
  9.           },
  10.           {
  11.             name: 'Ice cream sandwich',
  12.             calories: 237,
  13.           },
  14.           {
  15.             name: 'Eclair',
  16.             calories: 262,
  17.           },
  18.           {
  19.             name: 'Cupcake',
  20.             calories: 305,
  21.           },
  22.           {
  23.             name: 'Gingerbread',
  24.             calories: 356,
  25.           },
  26.           {
  27.             name: 'Jelly bean',
  28.             calories: 375,
  29.           },
  30.           {
  31.             name: 'Lollipop',
  32.             calories: 392,
  33.           },
  34.           {
  35.             name: 'Honeycomb',
  36.             calories: 408,
  37.           },
  38.           {
  39.             name: 'Donut',
  40.             calories: 452,
  41.           },
  42.           {
  43.             name: 'KitKat',
  44.             calories: 518,
  45.           },
  46.         ],
  47.       }
  48.     },
  49.   }
  50. </script>

Simple tables（简单的表格） - 图4

固定标题

将 fixed-header 属性与 height 属性一起使用将标题固定在表格的顶部。

template script

  1. <template>
  2.   <v-simple-table fixed-header height="300px">
  3.     <template v-slot:default>
  4.       <thead>
  5.         <tr>
  6.           <th class="text-left">Name</th>
  7.           <th class="text-left">Calories</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <tr v-for="item in desserts" :key="item.name">
  12.           <td>{{ item.name }}</td>
  13.           <td>{{ item.calories }}</td>
  14.         </tr>
  15.       </tbody>
  16.     </template>
  17.   </v-simple-table>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         desserts: [
  6.           {
  7.             name: 'Frozen Yogurt',
  8.             calories: 159,
  9.           },
  10.           {
  11.             name: 'Ice cream sandwich',
  12.             calories: 237,
  13.           },
  14.           {
  15.             name: 'Eclair',
  16.             calories: 262,
  17.           },
  18.           {
  19.             name: 'Cupcake',
  20.             calories: 305,
  21.           },
  22.           {
  23.             name: 'Gingerbread',
  24.             calories: 356,
  25.           },
  26.           {
  27.             name: 'Jelly bean',
  28.             calories: 375,
  29.           },
  30.           {
  31.             name: 'Lollipop',
  32.             calories: 392,
  33.           },
  34.           {
  35.             name: 'Honeycomb',
  36.             calories: 408,
  37.           },
  38.           {
  39.             name: 'Donut',
  40.             calories: 452,
  41.           },
  42.           {
  43.             name: 'KitKat',
  44.             calories: 518,
  45.           },
  46.         ],
  47.       }
  48.     },
  49.   }
  50. </script>

Simple tables（简单的表格） - 图5

Vue School

Learn Vue.js and modern and cutting-edge front-end technologies with our premium tutorials and video courses.

ads by Vuetify

](https://vueschool.io/?ref=vuetifyjs.com&friend=vuetify)

密集表格

您可以使用 dense 属性显示表格的密集版本。

template script

  1. <template>
  2.   <v-simple-table dense>
  3.     <template v-slot:default>
  4.       <thead>
  5.         <tr>
  6.           <th class="text-left">Name</th>
  7.           <th class="text-left">Calories</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <tr v-for="item in desserts" :key="item.name">
  12.           <td>{{ item.name }}</td>
  13.           <td>{{ item.calories }}</td>
  14.         </tr>
  15.       </tbody>
  16.     </template>
  17.   </v-simple-table>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         desserts: [
  6.           {
  7.             name: 'Frozen Yogurt',
  8.             calories: 159,
  9.           },
  10.           {
  11.             name: 'Ice cream sandwich',
  12.             calories: 237,
  13.           },
  14.           {
  15.             name: 'Eclair',
  16.             calories: 262,
  17.           },
  18.           {
  19.             name: 'Cupcake',
  20.             calories: 305,
  21.           },
  22.           {
  23.             name: 'Gingerbread',
  24.             calories: 356,
  25.           },
  26.           {
  27.             name: 'Jelly bean',
  28.             calories: 375,
  29.           },
  30.           {
  31.             name: 'Lollipop',
  32.             calories: 392,
  33.           },
  34.           {
  35.             name: 'Honeycomb',
  36.             calories: 408,
  37.           },
  38.           {
  39.             name: 'Donut',
  40.             calories: 452,
  41.           },
  42.           {
  43.             name: 'KitKat',
  44.             calories: 518,
  45.           },
  46.         ],
  47.       }
  48.     },
  49.   }
  50. </script>

Simple tables（简单的表格） - 图6

暗黑主题

使用 dark 属性切换到暗色主题。

template script

  1. <template>
  2.   <v-simple-table dark>
  3.     <template v-slot:default>
  4.       <thead>
  5.         <tr>
  6.           <th class="text-left">Name</th>
  7.           <th class="text-left">Calories</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <tr v-for="item in desserts" :key="item.name">
  12.           <td>{{ item.name }}</td>
  13.           <td>{{ item.calories }}</td>
  14.         </tr>
  15.       </tbody>
  16.     </template>
  17.   </v-simple-table>
  18. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         desserts: [
  6.           {
  7.             name: 'Frozen Yogurt',
  8.             calories: 159,
  9.           },
  10.           {
  11.             name: 'Ice cream sandwich',
  12.             calories: 237,
  13.           },
  14.           {
  15.             name: 'Eclair',
  16.             calories: 262,
  17.           },
  18.           {
  19.             name: 'Cupcake',
  20.             calories: 305,
  21.           },
  22.           {
  23.             name: 'Gingerbread',
  24.             calories: 356,
  25.           },
  26.           {
  27.             name: 'Jelly bean',
  28.             calories: 375,
  29.           },
  30.           {
  31.             name: 'Lollipop',
  32.             calories: 392,
  33.           },
  34.           {
  35.             name: 'Honeycomb',
  36.             calories: 408,
  37.           },
  38.           {
  39.             name: 'Donut',
  40.             calories: 452,
  41.           },
  42.           {
  43.             name: 'KitKat',
  44.             calories: 518,
  45.           },
  46.         ],
  47.       }
  48.     },
  49.   }
  50. </script>

Simple tables（简单的表格） - 图7