v-data-table 用於顯示錶格資料，功能包括排序、搜尋、分頁、行內編輯、頭部提示以及行選擇。而我們在實際應用中使用最多的就是服務端分頁和排序，如果你從後臺載入資料，並希望顯示結果之前進行分頁和排序，你可以使用 total-items 屬性。定義這個屬性將會禁用內建的分頁和排序，並且你需要使用 pagination 屬性來監聽變化。使用 loading 屬性來顯示獲取資料時的進度條。

1、v-data-table核心屬性

（1）headers：定義表頭的陣列，陣列的每個元素就是一個表頭資訊物件，結構：

{
  text: string, // 表頭的顯示文字
  value: string, // 表頭對應的每行資料的key
  align: 'left' | 'center' | 'right', // 位置
  sortable: boolean, // 是否可排序
  class: string[] | string,// 樣式
  width: string,// 寬度
}
 

（2）items：表格的資料的陣列，陣列的每個元素是一行資料的物件，物件的key要與表頭的value一致。
（3）loading：是否顯示載入資料的進度條，預設是false；
（4）total-items：分頁的總條數資訊，number型別，無預設值；
（5）pagination.sync：包含分頁和排序資訊的物件，將其與vue例項中的屬性關聯，表格的分頁或排序按鈕被觸發時，會自動將最新的分頁和排序資訊更新。物件結構：

{
    page: 1, // 當前頁
    rowsPerPage: 5, // 每頁大小
    sortBy: '', // 排序欄位
    descending:false, // 是否降序
}
 

（6）select-all ：是否顯示每一行的複選框，Boolean型別，無預設值；
（7）no-data-text：當沒有查詢到資料時顯示的提示資訊，string型別，無預設值；
（8）dark：是否使用黑暗色彩主題，預設是false；
（9）expand：表格的行是否可以展開，預設是false。

（10）search：搜尋過濾欄位，用不到，暫時不管

2、服務端分頁模板

2.1、官網服務端分頁demo

官方網站上提供的一個例子程式碼

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
      :pagination.sync="pagination"
      :total-items="totalDesserts"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </div>
</template>
 

以上程式碼例子中，Vue自動遍歷傳遞過來的items屬性，並把得到的物件傳遞給這個段template中的props.item屬性。但是需要注意的是

• 給items和totalitems賦值；
• 當pagination變化時，重新獲取資料，再次給items和totalitems賦值。 

2.2、分頁屬性

（1）pagination.sync屬性說明

首先我們發現pagination包含分頁以及排序資訊的物件。有下屬性：

• page當前頁，也就是當前第幾頁；
• rowsPerPage表示每頁多少條記錄；
• sortBy表示分頁欄位；
• descending：是否降序；
• totalItems表示總條數，一般是後臺傳遞給前臺。

【需要注意】我們在前臺頁面選擇分頁方式需要採用watch對pagination物件進行監控。如下面這段程式碼

   watch:{
      key(){
        this.loadBrands();
      },
      pagination:{
        deep: true,//深度監控
        handler(){
          this.loadBrands();
        }
      }
    },
 methods:{
      loadBrands(){
       this.$http.get("/brands/page",{ params:{
          page: this.pagination.page,//當前頁
          row: this.pagination.rowsPerPage,//每頁大小
          sortBy: this.pagination.sortBy, //分頁欄位
           desc: this.pagination.descending,//第幾頁
           key: this.key,//查詢條件
         }
       }).then();
        }
    }

    }

以上程式碼發出的請求是http://api.leyou.com/api/brands/page?page=1&row=25&sortBy=id&desc=true&key=zhagnsan。

3、例子

<template>
    <div>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">

          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image" alt=""/></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">修改/刪除</td>
        </template>
      </v-data-table>
    </div>
</template>

<script>
  export default {
      name: "MyBrand",
      data(){
        return {
          totalBrands: 0,//
          brands: [],//陣列，就是個陣列，對應元件中的item
          loading: false,
          pagination: {},//空物件
          headers: [ //headers表頭陣列，裡面是物件
            {
              text: '品牌id',//顯示文字
              align: 'center',//left，center，rights三種對其方式
              sortable: true,//是不是需要排序
              value: 'id' //value這個頭關聯的欄位
            },
            {text: '品牌名稱', align: 'center', value: 'name' , sortable: false },
            {text: '品牌Logo', align: 'center', value: 'image' , sortable: false },
            {text: '首字母', align: 'center', value: 'letter' , sortable: false },
            {text: '操作', align: 'center', sortable: false }

          ]
        }
      },
      created(){
          this.brands=[
            {id:1,name:"小米",image:"2.jpg",letter:"X"},
            {id:2,name:"華為",image:"",letter:"H"},
            {id:1,name:"Apple",image:"",letter:"A"},
            {id:1,name:"三星",image:"",letter:"S"}
          ];
          this.totalBrands=15;
      }

    }
</script>