1.slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。
2.动态绑定tableData数据，通过每页的数据条数进行分页
<template>
<div>
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%"
>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="id" label="id" width="180"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
el-pagination为分页器，total为总数据多少条，page-size为每页多少条
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id:1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id:1,
date: "2016-05-04",
name: "内网",
address: "上海市普陀区金沙江路 1517 弄"
},
{
id:1,
date: "2016-05-01",
name: "北王",
address: "上海市普陀区金沙江路 1519 弄"
},
{
id:1,
date: "2016-05-03",
name: "东王",
address: "上海市普陀区金沙江路 1516 弄"
},
{
id:1,
date: "2016-05-03",
name: "东王",
address: "上海市普陀区金沙江路 1516 弄"
},
],
currentPage: 1, // 当前页码
total: 5, // 总条数
pageSize: 2 // 每页的数据条数
};
},
methods: {
//每页条数
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页
handleCurrentChange(val) {
console.log(val);
this.currentPage = val;
},
}
};
</script>
