首先，先创建简易的 table
<template>
<div>
<el-table :data="current_page_data">
<el-table-column prop="id" label="ID">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "dataList",
data() {
return {
tableData:
[
{
'id': 1,
'name': '张三'
},
{
'id': 2,
'name': '李四'
},
{
'id': 3,
'name': '王二'
},
],
}
},
}
</script>
<style>
</style>
目前，作为案例的 table 搭建完毕。效果如下：
下一步，建立简单的分页组件
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="id" label="ID">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
<el-pagination background layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
name: "dataList",
data() {
return {
tableData:
[
{
'id': 1,
'name': '张三'
},
{
'id': 2,
'name': '李四'
},
{
'id': 3,
'name': '王二'
},
],
current_page_data: [],
current_page: 1,
}
},
}
</script>
<style>
</style>
下一步，为分页组件添加对应的参数。
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="id" label="ID">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
<el-pagination background layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[1,2,3,4]" :total="tableData.length" :current-page.sync="current_page"
@size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "dataList",
data() {
return {
tableData:
[
{
'id': 1,
'name': '张三'
},
{
'id': 2,
'name': '李四'
},
{
'id': 3,
'name': '王二'
},
],
current_page_data: [],
current_page: 1,
}
},
methods: {
handleSizeChange(val) {
console.log(`当前每页${
val}条`);
},
handleCurrentChange(val) {
console.log(`当前处于${
val}页`)
}
}
}
</script>
<style>
</style>
目前分页组件点击页数后，便可以正常的读取当前页码。
最后一步，建立连接
- 把 tableData 改为 current_page_data。
- 在 handleCurrentChange 函数中对 tableData 切片，并赋值给 current_page_data
<template>
<div>
<el-table :data="current_page_data">
<el-table-column prop="id" label="ID">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
<el-pagination background layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[1,2,3,4]" :total="tableData.length" :current-page.sync="current_page"
@size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "dataList",
data() {
return {
tableData:
[
{
'id': 1,
'name': '张三'
},
{
'id': 2,
'name': '李四'
},
{
'id': 3,
'name': '王二'
},
],
current_page_data: [],
current_page: 1,
}
},
methods: {
handleSizeChange(val) {
console.log(`当前每页${val}条`);
},
handleCurrentChange(val) {
console.log(`当前处于${val}页`)
console.log(this.current_page)
console.log(this.tableData.slice(val - 1, val))
this.current_page_data = this.tableData.slice(val - 1, val)
}
}
}
</script>
<style>
</style>
注意：本文每页的数量限制为 1 个，console.log(this.tableData.slice(val - 1, val))使用了 val - 1，而不是变量，切换每页条数无效。若需切换每页条数，只需修改为对应变量即可。
实现分页后的版本
<template>
<div>
<el-table :data="current_page_data">
<el-table-column prop="id" label="ID">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
<el-pagination background layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[1,2,3,4]" :page-size.sync="page_size"
:total="tableData.length" :current-page.sync="current_page"
@size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "dataList",
data() {
return {
tableData:
[
{
'id': 1,
'name': '张三'
},
{
'id': 2,
'name': '李四'
},
{
'id': 3,
'name': '王二'
},
],
current_page_data: [],
current_page: 1,
page_size: 1,
}
},
methods: {
handleSizeChange(val) {
console.log(`当前每页${
val}条`);
},
handleCurrentChange(val) {
console.log(`当前处于${
val}页`)
console.log(this.current_page)
var temp = (val - 1) * this.page_size;
if (temp + this.page_size < this.tableData.length)
this.current_page_data = this.tableData.slice(temp, temp + this.page_size)
else {
this.current_page_data = this.tableData.slice(temp, this.tableData.length)
}
}
}
}
</script>
<style>
</style>