首先组件代码,用官方示例代码即可:
<template>
<el-table
:data="tableData" //数据双向绑定
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
修改:data
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
在return data()中声明变量:
data() {
return {
// 当前页
currentPage: 1,
// 每页多少条
pageSize: 10,
tableData: [],
id: '',
}
},
分页组件:
<!--分页-->
<el-pagination
style="margin-top: 10px"
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
一个template只能解析一个根div,要将两个组件放在一个div中
实现效果: