<template>
<div>
<el-table :data="xpList" border style="width: 100%" height="500" >
<el-table-column prop="" label="序号" :formatter="nShowIndex" width="80"></el-table-column>
<el-table-column label="序号1" align="center" width="80">
<template slot-scope="scope">
{{scope.$index + 1 + page.pageSize*(page.currentPage-1)}}
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="120"></el-table-column>
</el-table>
<div style="margin-top:20px">
<el-pagination
background
layout="total,prev, pager, next,jumper"
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size ="page.pageSize"
:total="page.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
return{
// 模拟静态数据源
arrObj : [
{name: 'a', age: 1},
{name: 'b', age: 2},
{name: 'c', age: 3},
{name: 'd', age: 4},
{name: 'e', age: 5},
{name: 'f', age: 6},
{name: 'g', age: 7},
{name: 'h', age: 8},
{name: 'i', age: 9},
{name: 'j', age: 10},
],
// 页面分页后展示的数据
xpList:[],
// element分页配置
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 5, // 每页显示多少条,
isAsc: false // 是否倒序
}
}
},
created() {
this.page.total = this.arrObj.length;
// this.xpList = this.arrObj.slice(0,5);
this.xpList = this.arrObj.slice(0,this.page.pageSize);
}
,
methods: {
handleCurrentChange(val){
//第一页判断
if(val === 1){
this.xpList = this.arrObj.slice(0,this.page.pageSize);
}
else {
this.xpList = this.arrObj.slice(val * this.page.pageSize - this.page.pageSize ,val * this.page.pageSize);
}
// 设置页码
this.page.currentPage=val;
},
// 表格内自定义显示
nShowIndex(row, column, cellValue, index){
return index + 1;
}
,
// 测试slice函数用
btnButton(){
const strTemp= ['11','22','33','44','55','66','77','88','99']
const lResult = strTemp.slice(7,10);
console.log(lResult);
},
}
}
</script>
<style scoped>
</style>