axios表格分頁

今天來寫一個分頁，表格分頁在實際項目中常常用到，以前也寫過關與bootstrap table 裏面的表格分頁，道理都差很少同樣的，Element UI也有本身的組件能夠用，話很少說，直接上代碼了。

Element UI手冊：cloud.tencent.com/developer/d… 中文文檔：element-cn.eleme.io/#/zh-CN github地址：github.com/ElemeFE/ele…

---

接着以前的項目繼續寫，打開一個vue界面，在裏面寫以下代碼：

<template>
	<div>
		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<el-table-column prop="id" label="日期" width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="180">
			</el-table-column>
			<el-table-column prop="price" label="地址">
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination 
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange" 
				:current-page="currentPage" 
				:page-sizes="[5, 10, 20, 40]" 
				:page-size="pagesize" 
				layout="total, sizes,prev, pager, next" 
				:total="tableData.length" 
				prev-text="上一頁" 
				next-text="下一頁">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import axios from "axios";
	export default {
		name: "app",
		data() {
			return {		
				currentPage: 1, //默認顯示頁面爲1
				pagesize: 5, //    每頁的數據條數
                tableData: [], //須要data定義一些，tableData定義一個空數組，請求的數據都是存放這裏面
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				axios.get('http://localhost:8080/api/test').then(response => {
					console.log(response.data);
					this.tableData = response.data;
				}, response => {
					console.log("error");
				});
			},
			//每頁下拉顯示數據
			handleSizeChange: function(size) {
				this.pagesize = size;
				/*console.log(this.pagesize) */
			},
			//點擊第幾頁
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				/*console.log(this.currentPage) */
			},

		}
	}
</script>
複製代碼

test.json

[  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "徐家彙"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "徐家彙"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "徐家彙"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "徐家彙"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "徐家彙"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "徐家彙"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "徐家彙"  
        },
        
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }  
    ]  

複製代碼

效果以下

到這裏就成功的實現了一個表格和分頁了，數據是用mock模擬的，實際中換成後端的接口就能夠了。

---

原文做者：祈澈姑娘