ElementUI的表格要求的資料型別為字典陣列。我使用了python3寫後端，那麼從資料庫取資料時新增一行cursorclass=pymysql.cursors.DictCursor即可。取出後我將其存入redis資料庫方便之後取用。取用時使用eval()函式再傳到前端即可。

前端放置Pagination 分頁器，我這裡直接採用了完整功能的分頁器。

<el-pagination
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page="currentPage"
	:page-sizes="[10, 20, 50, 100]"
	:page-size="pagesize"
	layout="total, sizes, prev, pager, next, jumper"
	:total="data.length">
</el-pagination>
 

其中：handleSizeChange為pagesize發生改變時的相應函式，handleCurrentChange為currentPage發生改變時的相應函式。

page-sizes為所有可選擇的page-size。可以自己更改其中的數字。

layout為附帶的功能，一般不用動它。

total為總資料數。由於是字典陣列，直接使用length方法即可得到總資料數。

data () {
	return {
		data: [],
		currentPage:1,
		pagesize:20,

    }
},

初始頁currentPage、初始每頁資料數pagesize和資料data

methods: {
	handleSizeChange: function (size) {
		this.pagesize = size;
	},
	handleCurrentChange: function(currentPage){
		this.currentPage = currentPage;
	}
}
 

上面的兩個響應函式，很好理解。

<el-table
	:data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)"
	stripe
	style="width: 100%">

el-table標籤。通過計算很容易得到，要使當頁顯示分頁後的對應資料，其下標應為(當前頁-1)*每頁資料數  到  當前頁*每頁資料數。使用slice方法進行取用。

stripe為帶斑馬紋表格。

<el-table-column
	prop="id"
	label="序號"
	align="center">
</el-table-column>
 

column標籤。可放多個，對每列的控制。label為該列名稱，顯示在第一行。prop為data中的某key的名稱。

最後成果