Primero, crea una tabla simple
<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>
En la actualidad, se ha construido la mesa como caso. El efecto es el siguiente:
A continuación, cree un componente de paginación simple
<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>
A continuación, agregue los parámetros correspondientes para el componente de paginación .
<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>
Después de hacer clic en el número de página, el componente de paginación actual puede leer normalmente el número de página actual.
El último paso es establecer una conexión.
- Cambie tableData a current_page_data.
- Corte el tableData en la función handleCurrentChange y asígnelo a 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>
Nota: El número de páginas por página en este artículo está limitado a 1. Console.log (this.tableData.slice (val-1, val)) usa val-1 en lugar de variables. Cambiar el número de elementos por página no es válido . Si necesita cambiar el número de elementos por página, solo necesita modificarlo a la variable correspondiente.
Versión después de la paginación
<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>