vue项目中使用分页

目录

说明

封装分页组件

使用分页组件

前端分页处理

当分页在后端处理时的前端操作

小结说明

---

说明

• 借助elementUI组件库

• 本次的分页采用组件化的思想，将分页单独制作成一个组件，适合多页面都使用到分页的项目

• 分页可以前端实现

  • 下面出现的pageIndex为当前分页页码，pageSize为每个分页展示的数据量，total为所有的数据量

  • 在组件挂载之后，进行一次接口请求数据的操作，这时候后端返回数据的总条数total，以及所有的数据，这个所有的数据可以使用一个变量保存起来

  • 请求完所有的数据之后，根据默认参数 pageIndex，pageSize进行首次数据渲染，比如在第一个分页渲染20条数据

  • 当前端用户改变pageIndex 或者pageSize的时候，调整页面数据展示

    • 改变pageIndex时，根据总数据，pageIndex，pageSize之间的算数，展示当前分页展示的数据

    • 改变pageSize时，将pageIndex重置为初始值，根据pageSize和总数据之间的算数关系展示分页的数据

• 也可以后端实现

  • 后端处理分页的话，在前端需要执行的处理：在组件挂载之后，先进行一次接口请求数据的操作，后端需要返回数据的总条数total便于前端确定分页的页数

  • 第一次的数据渲染默认的当前页面是第一页，因此传递给后端的参数中pageIndex=1，pageSize也可以先设置默认的一个值比如20

  • 当前端页面发生变化

    • 比如用户改变pageIndex的值，切换到其他的分页上去的时候，要进行一次接口请求，传入正确的参数

    • 当用户改变pageSize，比如用户想一页展示100条数据的时候，这个时候进行接口请求，可以将pageIndex设置为1，传入正确的pageSize参数请求后台接口，进行数据重新渲染

    • 当用户刷新页面，或者页面重置之类的操作的时候，可以执行页面改在时的分页请求操作，此时所有参数恢复默认值

封装分页组件

<template>
 <div class="page-bg">
      <el-pagination @size-change="handlePageSizeChange"
                     @current-change="handlePageCurrentChange"
                     :current-page="pageIndex"
                     :page-sizes="[20, 50, 100, 200]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     background>
      </el-pagination>
    </div>
</template>

<script>
  export default {
    name: "Pagination",
    props: {
      pageIndex: { // 分页的当前页码
        type: Number,
        default: 1
      },
      pageSize: { // 每个分页展示的数据量
        type: Number,
        default: 20
      },
      total: { // 需要分页的总的数据量
        type: Number
      }
    },
    methods: {
      handlePageSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$emit('pageSizeChange',val)
      },
      handlePageCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.$emit('pageCurrentChange',val)
      }
    }
  }
</script>

<style scoped>
.page-bg{
      display: flex;
      flex-direction: row;
      height: 50px;
      align-items: center;
 }
</style>

使用分页组件

<template>
    <!-- 这里可以进行数据渲染 渲染tableData中的数据 -->
 	<Pagination
        :total="total"
        :page-index="pageIndex"
        :page-size="pageSize"
        :table-data="tableData"
        @pageSizeChange="handlePageSizeChange"
        @pageCurrentChange="handlePageCurrentChange"
  	>
</template>
import Pagination  from 'Pagination组件的路径'
export default {
    name: 'xxx组件名字',
    components: {Pagination},
    data() {
        return {
            total: 0, // 数据的总条数
            pageIndex: 1, // 当前分页的页数 默认第一页
            pageSize: 20, // 每个分页页面展示的数据条数  默认每页20条数据
            tableData : [], // 展示在当前分页上的数据
            totalTableData : [] // 全部的数据 在前端分页中使用到
        }
    },
    mounted(){
        subInfo() // 组件挂载之后进行一次接口请求
    },
    methods: {
        // 处理分页的操作
        // xxx操作一
        // xxx操作二
    },
}

前端分页处理

• tableData是当前分页上需要展示的数据，totalTableData是总的数据

  // 首次进行数据请求的接口
  //接口请求
  subInfo() {
      // common.ajax是自己封装的ajax请求
      common.ajax({
          transNO: "xxx接口地址",
          method: "post",
          data: this.params, // 这个参数里面有pageIndex, pageSize，还有其他可能需要使用到的参数
      })
      .then((res) => {
          // 这里可以将所有的请求数据保存起来，比如保存到totalTableData
          // 然后执行一次 handlePageCurrentChange(1) 操作进行数据初次渲染
      }
  },
  
  //分页，每页数目改变时
  handlePageSizeChange(val) {
      console.log(`每页假数据 ${val} 条`);
      this.pageIndex = 1
      this.pageSize = val
      // 当前页面条数 this.pageSize
      this.tableData = []
      for(let i in this.totalTableData) {
      if(Number(i) >= Number(this.pageSize) || Number(i) >= this.total) break
      this.tableData.push(this.totalTableData[i])
      }
  },
      
  //分页，页数改变时
  handlePageCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageIndex = val
      this.tableData = []
      let currentNum = Number(this.pageSize)*(Number(this.pageIndex) -1 )
      for(let i = currentNum; i < this.totalTableData.length ;i++) {
          if( ((i-currentNum) >= this.pageSize ) || (i-currentNum) >= this.total) break
          this.tableData.push(this.totalTableData[i])
      }
  },

  当分页在后端处理时的前端操作

  • this.subInfo()是进行后台数据请求的接口，会根据pageSize和pageIndex的值返回对应的数据

    //分页，每页数目改变时
    handlePageSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageIndex = 1
        this.pageSize = val
        this.params = {
            ...this.params, // params参数可以有其他的参数
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        }
        this.subInfo()
    },
    //分页，页数改变时
    handlePageCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val
        this.params = {
            ...this.params,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        }
        this.subInfo()
    },
        
    //接口请求
    subInfo() {
        // common.ajax是自己封装的ajax请求
        common.ajax({
            transNO: "xxx接口地址",
            method: "post",
            data: this.params, // 这个参数里面有pageIndex, pageSize，还有其他可能需要使用到的参数
        })
        .then((res) => {
            // 在这里就可以对返回的数据进行保存，或者一些其他的数据判断数据格式啥的之类的操作 比如将结果数据保存到tableData变量中，使用tableData来渲染页面
        }
    },

小结说明

• 当数据库中的数据变化不频繁，而且数据量不大的话，可以使用前端分页，一次性将所有的数据请求到前端，这样可以减少数据库请求次数

• 如果项目中使用到的数据是更新比较频繁的，而且数据量比较大，就不适合在前端分页，数据量大的话，一次性将所有数据请求到前台可能请求时间会比较长，而且数据量大，容易给前端内存带来压力；数据更新比较频繁的话，适合使用后端分页，以保证用户改变pageIndex，pageSize都能保证获取到数据库内最新的数据