工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办

文章目录

• • 一、如何使用elementUI+vue实现前端分页
  • 二、通用的前端分页代码

    有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。

    一、如何使用elementUI+vue实现前端分页

    假如你用vue来实现，思路就是将数据切割，然后分批显示。

    所以可以使用 computed 计算属性和 v-for 指令来实现前端分页。

    因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。

    如果我需要结合elementUI的分页组件，怎么实现呢？以下是实现方式，做得跟后端给的分页一样的效果。

                                                       export default {  data() {    return {      list: [] //后端接口给的列表数据（未分页，全部返回）    }  },  created() {    //请求后端数据    this.getList();  },  computed: {    // 使用前端实现分页的计算数据    paginatedData() {      // 分页的起始下标      const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;      // 分页的末尾下标      const endIndex = startIndex + this.listQuery.pageNum;      // 返回切割后的数据      return this.list.slice(startIndex, endIndex);    },    // 总条数    totalNum() {      return this.list.length;    },    // 总分页数    total() {      return Math.ceil(this.list.length / this.listQuery.pageNum);    }  },  methods:{   //数据   getList() {      //调用后端接口      staticsList().then((res) => {        this.list = res.data;      });    },    // 每页列表数    handleSizeChange(val) {      this.listQuery.pageNum = val;    },    // 当前分页数（第几页）    handleCurrentChange(val) {      this.listQuery.page = val;    },  }}        

    这样就可以实现前端分页了。

    二、通用的前端分页代码

    如果你的项目中，不是用elementUI框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。

    以下是一个示例代码：

          
    {{item.name}}
        
                        {{ pageNumber }}            export default {  data() {    return {      data: [], // 假如这里就是你通过接口获取到的所有的数据（未分页）      itemsPerPage: 10, // 每页显示的数据量      currentPage: 1 // 当前页码    };  },  computed: {    paginatedData() {      const startIndex = (this.currentPage - 1) * this.itemsPerPage;      const endIndex = startIndex + this.itemsPerPage;      return this.data.slice(startIndex, endIndex);    },    totalPages() {      return Math.ceil(this.data.length / this.itemsPerPage);    }  }};

    在这个示例中，我们使用 v-for 指令来遍历每一页要显示的数据，并使用 slice() 方法来获取当前页码对应的数据。我们还计算了总页数，以便在分页控件中显示所有的页码。

    在模板中，我们使用 v-for 指令来遍历每一页要显示的数据，并在分页控件中使用 v-for 指令来显示所有的页码。我们在每个页码按钮上绑定了一个 click 事件，点击按钮时会更新当前页码。

    如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

    祝你能成为一名优秀的WEB前端开发工程师！