简述
作为一组常用的控件，table常常和page控件组合使用以实现分页的效果，在此实现过程中借鉴了很多的博客，但是唯有这一篇更易理解，也更易实现，所以在这里分享给大家。以一下几部分展开：
模板
大家接触过vue的都知道，在一个vue页中主要由模板，script，style三部分组成。那么首先我们来说一下模板是如何书写的。
<template>
<div>
<Table :columns="foodColumns" :data="foodData"></Table> <!-- //table组件 -->
<Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage"></Page> <!-- //page组件 -->
</div>
</template>
script
模板之后一般书写的就是script这部分的代码，script中又包括有准备数据、数据处理（model部分、处理部分）两部分。
首先我们来看一下数据的准备：此时我们使用的全为假数据。
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
},
{
"foodName": "韭菜鸡蛋",
"foodImage": "image",
"foodPrice": "2.50",
"foodClass": "热菜",
"foodDelete": "####"
}
数据处理
数据处理所需要做的：首先对列表的数据进行处理，显示多少条。然后对分页处理，当点击分页的时候，返回一个数值，然后通过数值从数据中筛选数据。最后把筛选出来的数据在给列表绑定的model赋值即可。
////////////////////////////////////model部分///////////////////////////////////////////////////
data () {
return {
ajaxHistoryData:[],
// 初始化信息总条数
dataCount:0,
// 每页显示多少
pageSize:5,
foodColumns: [
{
title: '食物名称',
key: 'foodName'
},
{
title: '食物图片',
key: 'foodImage'
},
{
title: '食物价格',
key: 'foodPrice'
},
{
title: '所属菜系',
key: 'foodClass'
},
{
title: '删除',
key: 'foodDelete'
}
],
historyData: []
}
}
////////////////////////////////////处理部分（方法）///////////////////////////////////
methods:{
// 获取历史记录信息
handleListApproveHistory(){
// 保存取到的所有数据
this.ajaxHistoryData = testData.histories
this.dataCount = testData.histories.length;
// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
if(testData.histories.length < this.pageSize){
this.foodData = this.ajaxHistoryData;
}else{
this.foodData = this.ajaxHistoryData.slice(0,this.pageSize);
}
},
changepage(index){
var _start = ( index - 1 ) * this.pageSize;
var _end = index * this.pageSize;
this.foodData = this.ajaxHistoryData.slice(_start,_end);
}
/* btnsubmit(){
this.$router.push({path:'/Tips.vue'})
} */
},
created(){
this.handleListApproveHistory();
}
style
这部分主要写的是组件的样式，如下：
<style scoped>
.paging{
float:right;
margin-top:10px;
}
</style>
完整页面代码（此方法没有使用到父子组件等）
<template>
<div>
<Table :columns="foodColumns" :data="foodData"></Table>//table组件
<Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage"></Page>//page组件
</div>
</template>
<script>
let testData = {
histories: [
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
},
{
foodName: "韭菜鸡蛋",
foodImage: "image",
foodPrice: "2.50",
foodClass: "热菜",
foodDelete: "####"
}
]
};
export default {
data() {
return {
ajaxHistoryData: [],
// 初始化信息总条数
dataCount: 0,
// 每页显示多少条
pageSize: 10,
foodColumns: [
{
title: "食物名称",
key: "foodName"
},
{
title: "食物图片",
key: "foodImage"
},
{
title: "食物价格",
key: "foodPrice"
},
{
title: "所属菜系",
key: "foodClass"
},
{
title: "删除",
key: "foodDelete"
}
],
historyData: []
};
},
methods: {
// 获取历史记录信息
handleListApproveHistory() {
// 保存取到的所有数据
this.ajaxHistoryData = testData.histories;
this.dataCount = testData.histories.length;
// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
if (testData.histories.length < this.pageSize) {
this.foodData = this.ajaxHistoryData;
} else {
this.foodData = this.ajaxHistoryData.slice(0, this.pageSize);
}
},
changepage(index) {
var _start = (index - 1) * this.pageSize;
var _end = index * this.pageSize;
this.foodData = this.ajaxHistoryData.slice(_start, _end);
}
},
created() {
this.handleListApproveHistory();
}
};
</script>
结果显示
总结
不懂就要问，大家加油吧！