簡述
作爲一組常用的控件，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>
結果顯示
總結
不懂就要問，大家加油吧！