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>