标签：el pagination slice 分页 pageSize age page arrObj name

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

标签：el,pagination,slice,分页,pageSize,age,page,arrObj,name
来源： https://www.cnblogs.com/linhan8888/p/14967379.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。