最常用的VuetifyJS组件 - 数据表格

12002

1. 本课介绍

在这门课程中，你将学习如何利用VuetifyJS的数据表格组件创建具有增删改查功能的网页。在编程中，数据操作包括增加、删除、修改和查询，因此这个组件是最常用的组件。

通过使用这个组件，你会发现它需要几个组件组合一起才能完成任务。掌握多个组件组合使用，能够提升你的编程能力。动手尝试使用这个组件来创建一个学生管理的数据表格。

观看“简化Vuetify数据表格的模板与函数”的视频教程，学习如何修改数据表格的代码以简化模板和函数。通过调整代码结构，使其更易读和清晰，这有助于养成良好的编程习惯，并提高代码质量。

2. 认识VuetifyJS数据表格组件

打开VuetifyJS文档 带CRUD 操作的 v-data-table, 这是带有增删改查功能的表格组件。

用上节课学会的使用VuetifyJS组件的方法，复制模板TEMPLATE和脚本SCRIPT的代码，生成文件vuetify-datatable.html 。

用浏览器打开这个文件，出现下面的页面:

点击NEW ITEM出现弹框，是卡片的形状，输入数据，点击SAVE，能够保存新增的数据，而且表格中也有了新的数据。

数据表格页面能够对数据进行增删改查，这样的页面是一种常用的页面，Vuetify这个UI库提供的数据组件就可以完成，使用起来很方便。

3. 熟悉数据表格中的主要组件

这个页面表格的长相和功能比上节课最后动手操作的数据表格丰富了，不单纯只有表格，而且操作栏中出现铅笔和垃圾桶的图标，点击可以打开修改和删除数的弹框；表格的上方有一个NEW ITEM的按钮，点击就打开新增数据的弹框。

查看模板部分的代码，发现用了多个组件，最主要的是v-data-table、v-dialog、v-slot这三个组件。如果想让页面的长相和功能丰富起来，就使用多个组件组合在一起。

接下来把页面的长相和代码中的组件找到它们之间的对应关系，学习这些组件的用法。

v-data-table 组件的用法

v-data-table 组件是用于展示和处理表格数据的组件。

代码中找到<v-data-table ...></v-data-table>包住的代码：

   <template>
     <v-data-table
       :headers="headers"
       :items="desserts"
       sort-by="calories"
       class="elevation-1">
     ......
     </v-data-table>
   </template>

v-data-table的模板里面绑定了两个重要的变量 headers和items, 模板里面的数据是存在这两个变量的里面，headers是表头，items是表里的数据，把变量定义为你需要的内容，就能做出自己的表格。下面是脚本里对 headers和items的定义。

<script>
   ......
   headers: [
        { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name' },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Actions', value: 'actions', sortable: false },
   ],
   ......
   this.desserts = [
          { name: 'Frozen Yogurt', calories: 159,fat: 6.0, carbs: 24, protein: 4.0,},
          { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37,  protein: 4.3,},
          { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0,},
   ],
</script>

v-dialog 组件的用法

v-dialog 组件用于创建弹出式对话框，点击NEW ITEM出现一个弹框弹框，用于新增数据。

代码中找到<v-dialog v-model="dialog"...></v-dialog>包住的代码：

  <template>
    <v-dialog v-model="dialog" max-width="500px">
       ......
    </v-dialog>
  </template>

这就是弹框，弹框里面可以写入卡片、表单等其它组件。

v-slot 组件的用法

如果觉得组件的内容还不够个性化，v-slot组件可以把入个性化的内容加到原有的组件上，例如在数据表格的操作这一列，用铅笔和垃圾桶的图标表示修改和删除很直观，这就是插槽v-slot的作用。

代码中找到<template v-slot:item.actions="{ item }"></template>包住的代码：

   <template v-slot:item.actions="{ item }">
     <v-icon small class="mr-2" @click="editItem(item)">
       mdi-pencil
     </v-icon>
     <v-icon small  @click="deleteItem(item)" >
       mdi-delete
     </v-icon>
   </template>

这是在表格的Actions列中增加了两个图标，分别是铅笔和垃圾桶。

以上，通过找到页面长相和三个组件的的对应关系，对使用Vuetify组件编写代码就更加了解了。

4. 项目：仿照文档，写学生管理的数据表格

上面的页面是desserts的管理页面，你也可以用来管理学生信息。因为渲染的数据改变了，页面的内容就跟着改变，所以只要变量进行对应的替换就能够实现：

• 把header和items替换成学生相关的信息，
• desserts：[]替换成studentList:[],
• editedItem.xxxx全部替换成学生数组对象的属性，例如 editedItem.age,editedItem.gender等。

   <template>
     <v-data-table :headers="headers" :items="studentList" sort-by="calories" class="elevation-1">
        ......
        <v-card>
        <v-text-field v-model="editedItem.age" label="Age" ></v-text-field>
          ......
        </v-card>
        ......
     </v-data-table>
   </template>

  headers: [
    {text: '姓名',align: 'start', sortable: false,value: 'name',},
    {text: '学号', value: 'id', },
    {text: '年龄', value: 'age', },
    {text: '性别', value: 'gener',},
    {text: 'Actions', value: 'actions', sortable: false ,}
  ],
  studentList:[],

 this.studentList = [
    {name: '张小花',id: 'S01',age: '8',gender: '女'},
    {name: '王小草',id: 'S02',age: '11',gender: '女'},
    {name: '张大花',id: 'S03',age: '12',gender: '女'},
    {name: '王大草',id: 'S04',age: '9',gender: '女'}
 ]

用浏览器打开，看到表头和内容、弹框内容都修改为学生信息。

5. 简化Vuetify数据表格的模板与函数

为什么要进行简化

仔细读上面页面的代码，发现不容易读懂，因为层次不清晰，把多个v-dialog组件写在v-data-table组件的的里面。

新增和修改的对话框共用一个v-dialog组件，通过变量formTitle值的变化来区分是新增还是修改操作，增加了代码复杂性，对初学者不友好。

学习本课视频教程

为了解决这个问题，本课程录制了视频，带你一步一步的简化代码，帮助你重新构建一个层次清晰，功能分明的页面代码。

通过学习视频课程了解到简化代码的原则：

• 把模板部分的对话框组件从数据表格组件里拿出来，用 <container></container>标签包住组件，这样在看代码的时候，容易区分这段代码写的内容对应页面上是什么东西。
• 凡是页面点击增加、修改、删除按钮的，都调用同一个函数，将点击操作的类型传入作为参数，这样所有的操作函数都会被放在一起，功能和结构就很清楚（如果不能写成都调用同一个函数的，函数要按照功能分开写）。
• 变量、函数的名字要有意义，让人一看就明白它的功能。

下载代码资源