<template>
<div class="echarts">
<el-table :data="dataList" 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>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="pagation.currentPage" :page-size="pagation.pagesize" layout="total, prev, pager, next"
:total="pagation.total">
</el-pagination>
</div>
</template>
<script>
export default {
data: () => ({
tableData: [],
pagation: {
pagesize: 10,
total: 0,
currentPage: 1
},
listArr: []
}),
created() {
this.init()
},
computed: {
dataList() {
const dataCodeList = this.tableData
const pagesize = this.pagation.pagesize
const currentPage = this.pagation.currentPage
return dataCodeList.slice((currentPage - 1) * pagesize, pagesize * currentPage)
}
},
methods: {
init() {
let arr = []
const num = 26
for (var i = 0; i < num; i++) {
var obj = {
date: '2016-05-02',
name: '王小虎' + num,
address: '上海市普陀区金沙江路 1518 弄'
}
arr.push(obj)
}
this.pagation.total = num
this.tableData = arr
},
handleSizeChange(size) {
this.pagation.pagesize = size
},
handleCurrentChange(currentPage) {
this.pagation.currentPage = currentPage
}
}
};
</script>
<style scoped>
.echarts {
width: 100%;
height: 400px;
margin: auto;
text-align: center;
}
</style>在这里插入代码片
vue中前端实现数据分页展示
最新推荐文章于 2024-05-27 15:48:01 发布