Vue前端分页实现教程

一、前端怎么实现分页

1、理解前端分页的概念

前端分页就是在前端对数据进行分页显示，分页的目的就是为了让用户更好地浏览数据。在分页的过程中，我们一般会使用限制每一页的条数，根据数据总数计算出总页数，实现对不同页码的数据请求。

2、实现前端分页的思路

前端分页的实现思路很简单，就是在接口请求完数据之后将数据渲染到页面上，通过计算每一页应该显示的数据，实现分页功能。在Vue中，我们可以通过计算属性和Watch属性来动态计算每一页的数据，实现前端分页的功能。

二、纯前端实现分页

1、Vue的分页插件Vue-paginate

  // 引用Vue分页插件
  import Paginate from 'vuejs-paginate'
    
  // 注册Vue分页插件
  export default {
    name: 'app',
    components: {
      Paginate
    },
    data () {
      return {
        currentPage: 1,
        perPage: 10,
        totalItems: 20
      }
    },
    computed: {
      pageCount() {
        return Math.ceil(this.totalItems / this.perPage)
      },
      startItem() {
        return (this.currentPage - 1) * this.perPage
      },
      endItem() {
        return this.startItem + this.perPage
      },
      pages() {
        const pages = [];
        for (let i = 1; i <= this.pageCount; i++) {
          pages.push(i)
        }
        return pages;
      }
    },
    watch: {
      currentPage: function(val) {
        this.startItem = (val - 1) * this.perPage;
        this.endItem = this.startItem + this.perPage;
      }
    }
  }

2、原生JS实现分页

  function fenye(pageIndex, pageSize,totalCount) {
               var pageData = [];//分页后的数据
               if(pageIndex<1){//如果当前页码小于1
                   pageIndex=1;//将当前页码设置为空
               }
               this.pageIndex=pageIndex;//将当前页码暴露给全局
               this.pageSize=pageSize;//将每页的数据条数暴露给全局
               this.totalCount=totalCount;//将总数据条数暴露给全局

               var pageItemCount = 0;
               if(totalCount%pageSize!=0){//如果总数据条数无法整除每页显示的条数
                   pageItemCount = parseInt(totalCount/pageSize)+1;//当前页面显示条数为总数据余下的条数+1
               }else{
                   pageCount = parseInt(totalCount/pageSize);//否则直接计算当前页面显示条数
               }

               if(pageIndex*pageSize>totalCount){//如果计算出来的当前页面显示条数超过了总数据条数
                   pageIndex=pageCount;//将当前页面显示条数设置为总数据条数
               }
               var startCount=pageSize*(pageIndex-1);//计算当前页面显示的第一条数据的索引

               for (var i = startCount; i < totalCount&&i


   
三、前端实现分页功能

   
1、在Vue中使用element-ui分页组件

   
  
    

<script>
import axios from 'axios'

export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      pageData: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      axios.get('/api/data').then(response => {
        this.total = response.data.length
        this.pageData = response.data.slice(
          (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize
        )
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
    }
  }
}
</script>

   
2、在Vue中自己实现分页功能

   
  
    

  <script>
  import axios from 'axios'

  export default {
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 100,
        pageData: []
      }
    },
    computed: {
      totalPage () {
        return Math.ceil(this.total / this.pageSize)
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        axios.get('/api/data').then(response => {
          this.total = response.data.length
          this.pageData = response.data.slice(
            (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize
          )
        })
      },
      changePage (page) {
        if (page === 0) {
          this.currentPage = Math.min(Math.max(this.currentPage, 1), this.totalPage)
        } else {
          this.currentPage = Math.min(Math.max(this.currentPage + page, 1), this.totalPage)
        }
        this.getData()
      }
    }
  }
  </script>