商品分类完成以后，西瓜口袋拼团系统开发找广州许生自然轮到了品牌功能了。

先看看我们要实现的效果：

接下来，我们从0开始，实现下从前端到后端的完整开发。

7.1.设计前端页面

为了方便看到效果，我们新建一个MyBrand.vue（注意先停掉服务器），从0开始搭建。

内容初始化一下：

<template>
  <span>
    hello
  </span>
</template>
<script>
  export default {
    name: "myBrand"
  }
</script>
<!-- scoped:当前样式只作用于当前组件的节点 -->
<style scoped>
</style>12345678910111213141516

改变router新的index.js，将路由地址指向MyBrand.vue

打开服务器，再次查看页面：

干干净净了。只剩hello

7.1.1.查询表格

大家看到这个原型页面肯定能看出，其主体就是一个table。我们去Vuetify查看有关table的文档：

仔细阅读，发现 v-data-table中有以下核心属性：

• dark：是否使用黑暗色彩主题，默认是false

• expand：表格的行是否可以展开，默认是false

• headers：定义表头的数组，数组的每个元素就是一个表头信息对象，结构：

  {
    text: string, // 表头的显示文本
    value: string, // 表头对应的每行数据的key
    align: 'left' | 'center' | 'right', // 位置
    sortable: boolean, // 是否可排序
    class: string[] | string,// 样式
    width: string,// 宽度}12345678

• items：表格的数据的数组，数组的每个元素是一行数据的对象，对象的key要与表头的value一致

• loading：是否显示加载数据的进度条，默认是false

• no-data-text：当没有查询到数据时显示的提示信息，string类型，无默认值

• pagination.sync：包含分页和排序信息的对象，将其与vue实例中的属性关联，表格的分页或排序按钮被触发时，会自动将最新的分页和排序信息更新。