前台数据进行分页
Posted cs122
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前台数据进行分页相关的知识，希望对你有一定的参考价值。
<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>
以上是关于前台数据进行分页的主要内容，如果未能解决你的问题，请参考以下文章
实现数据在前台动态显示之分页的实现(将DataSet中的数据分页显示)