完整代码
<template>
<div style="height:1000px;">
<el-table
:data="datalist"
style=" 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>