vue 中的el-pagination 静态分页写法

本文章向大家介绍el-pagination 静态分页，主要包括el-pagination 静态分页使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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