西瓜口袋拼團系統開發

商品分類完成以後，西瓜口袋拼團系統開發找廣州許生自然輪到了品牌功能了。

先看看我們要實現的效果：

接下來，我們從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例項中的屬性關聯，表格的分頁或排序按鈕被觸發時，會自動將最新的分頁和排序資訊更新。