基于vue2.6 element UI 2.15.7 分页组件 实现前端分页功能

最近遇到了一个需要前端分页列表的需求 代码逻辑不难 简单记录一下吧

主要技术栈：vue2.6 elementUI2.15.7

HTML部分

<el-table stripe :data="paginationData">
   <el-table-column label="序号" type="index" />
   <el-table-column prop="name" label="名称1" />
   <el-table-column prop="age" label="名称2" />
   <el-table-column label="操作" width="160">
      <template slot-scope="scope">
         <span>
            <el-link @click="handleDel(scope.row)">删除</el-link>
         </span>
      </template>
   </el-table-column>
</el-table>
<c-pagination 
   background 
   :current-page="page.pageNum" 
   :page-size="page.pageSize" 
   layout="total, sizes, prev, pager, next, jumper" 
   :total="page.total" 
   @current-change="handleCurrentChange" 
   @size-change="handleSizeChange"
/>

部分

data(){
        return{
            page:{
              pageNum:1,
              pageSize:10
              total:0
            },
            currentPage: 1，// 当前页码
            dataList:[], // 后端返回的所有列表数据
            paginationData:[], // 前端整理后的列表数据
        }
}

crated(){
        this.search()
}
methods:{
        async search(){
                try{
                    // ...请求接口 获取原始列表接口数据
                    this.dataList = res.data.list
                    // 讲原始列表数据整理为分页数据
                    this.getTableList()
                }catch(err){
                    console.log(err)
                }
        },
        getTableList(){
                this.paginationData = []
                this.page.total = this.dataList.length
                for (let i = this.page.pageSize * (this.currentPage - 1); i < this.page.pageSize * this.currentPage; i++) {
                  if (this.dataList[i]) {
                     this.paginationData.push(this.dataList[i])
                  } else {
                     break
                  }
                }
        },
        // 点击页码分页按钮
        handleCurrentChange(index) {
              this.currentPage = index
              this.page.pageNum = index
              this.getTableList()
        },
        // 点击分页组件切换pageSize功能
        handleSizeChange(){
              this.page.pageSize = val
              this.getTableList()
        }
        //删除 此处删除只是前端展示删除 非删库删除 
        handleDel(info) {
              this.dataList.splice(this.dataList.indexOf(info), 1)
              this.getTableList()
       }
    },

2022-08-26 记