進行 ons methods scope hand ali pla ice and

<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>

前臺數據進行分頁