数据前台分页

完整代码

<template>

<div style="height:1000px;">

<el-table

:data="datalist"

style="width: 100%">

<el-table-column

label="年龄"

width="180">

<template slot-scope="scope">

{{scope.row.age}}

</template>

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

label="操作"

width="180">

<template slot-scope="scope">

<el-button @click="changeEdit(scope.row)">编辑</el-button>

</template>

</el-table-column>

</el-table>

<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pagetion.currentpage"

:page-sizes="[5, 20, 30, 40]"

:page-size="pagetion.pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="pagetion.totalpage">

</el-pagination>

</div>

</template>

<script>

export default {

data: () => ({

pagetion:{

pagesize:5,

totalpage:0,

currentpage:1

},

tableData:[]

}),

created () {

this.changeEdit()

},

computed:{

datalist () {

console.log(this.tableData)

const datacodelist = this.tableData

const pagesize = this.pagetion.pagesize

const currentpage = this.pagetion.currentpage

console.log((currentpage-1)*pagesize,pagesize*currentpage)

return datacodelist.slice((currentpage-1)*pagesize,pagesize*currentpage)

}

},

methods: {

handleSizeChange (size) {

this.pagetion.pagesize = size

},

handleCurrentChange (page) {

this.pagetion.currentpage = page

},

changeEdit(row) {

 

for ( let i=0; i<18; i++){

let obj = {

name:'chen'+i,

age:'18',

address:'.......'

}

this.tableData.push(obj)

}

this.pagetion.totalpage=18

}

}

};

</script>

<style scoped>

</style>