项目中关于分页的那些问题

项目中关于分页的那些问题

添加分页组件（element UI）

关于分页中自定义页码和点击页码跳转问题

     <el-pagination
                :page-sizes="[3, 5, 7, 10, 20]" //自定义页码数
                layout="sizes,prev,pager,next,jumper" 
                :current-page.sync="curPage"  //动态绑定当前页
                :page-size="pageParams.pagesize" // 默认条数
                :total="total"  //动态绑定总条数
                @size-change="hSizechange"  // 自定义条数触发函数
                @current-change="hCurrentChange" // 点击页码触发函数
         />             
 <script>
  export default{
     data() {
       return {
         total: 0,  //设置默认数据总条数
         curPage: 0,  //设置当前页
         pageParams: {  //设置后端需要参数
            page: 1,   //页码
           pagesize: 3  //每页条数
         }
      },
     methods:{
       //自定义数据条数触发函数
        hSizechange(curPage){
           // 更新页码
         this.pageParams.page = curPage
         //   重新发送请求
        } ,
      // 点击页码触发函数
        hCurrentChange(curPage){
           // 更新页码
         this.pageParams.page = curPage
            //   重新发送请求 
        }
     }    
  }
}
 </script>

点击页码

自定义数据条数

关于分页中跳转表格数据序号累加问题

<el-table :data="list"> //list 后端返回的数据
  <el-table-column 
       label="序号"
       width="120" 
       type="index" 
      :index="typeIndex" />
</el-table>        
methods:{
     typeIndex(index) {
      let curpage = this.pageParams.page
      const CurSize = this.pageParams.pagesize
      //设定当前最小页码是1
      curpage = curpage >= 1 ? curpage : 1
    // 当前页码-1*当前数据
      return index + 1 + (curpage - 1) * CurSize
    }
}