06_Vue实现分页功能(保姆级教程)

分页功能

1、前后端共同实现

<template>
  <div>
    <!-- 上面是table表 -->
    <!-- 分页器 -->
    <el-pagination 
      background 
      @current-change="handleCurrentChange" 
      :page-size="pageSize" 
      :current-page="currentPage"
      layout="total,prev, pager, next" 
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], //table 数据
      total: 0,//数据的条数                       将后端的count赋给 total
      pageIndex: 1,//当前分页的页数，默认显示第一页   向后端传
      pageSize: 20,//每页展示的数据条数             向后端传
      currentPage: '',//当前页

    }
  },
  methods: {
    select() {
      let params = {
        strKey: this.strkey,
        page: this.currentPage,
        pageSize: this.pageSize
      }
      axios({
        method: '请求类型',
        url: '请求地址',
        data: params
      }).then(res => {
        this.total = res.data.count
      })
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
      this.select();
    }
  }
}
</script>

2、前端自己实现：

<template>
  <div>
    <!-- 上面是table表 -->
    <!-- 分页器 -->
    <el-pagination 
      background 
      @current-change="handleCurrentChange" 
      :page-size="pageSize" 
      :current-page="currentPage"
      layout="total,prev, pager, next" 
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getcustomqueryresults } from '@/utils/https'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      PageSize: 20,
      total: 0,

    }
  },
  methods: {
    select() {
      ().then(res => {
     	//将得到的数据 进行分页处理
        this.tableData = res.data.slice(
          (this.currentPage - 1) * this.PageSize,
          this.currentPage * this.PageSize
        )
        this.total = Number(res.count)
      })
    },
    handleCurrentChange(val) {
      console.log(val, 'val当前页')
      this.currentPage = val
      this.select()
    },
  }
}
</script>