vue前端实现的假分页

当后端一次性返回的数据太多,前端全部展示会影响美观,因此需要前端做一个假分页,看一下实现代码:

html部分,和平常写法一样的

<template>
  <div>
    <el-table :data="pageList" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      layout="sizes,prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

js部分:

<script>
  export default {
    data() {
      return {
        tableData: [//从后台获取或者自行定义],
        total: 0,
        current: 1,
        size: 10,
        pageList: [],
      }
    },
    created() {
      //调用获取数据
      this.getData()
    },
    methods: {
      //从后台获取数据处理
      getData() {
        //发送接口并赋值
        this.total = this.tableData.length
        // 拷贝一份数据
        let list = JSON.parse(JSON.stringify(this.tableData))
        // splice处理数组的方法会改变原数组,所以需要拷贝一份
        this.pageList = list.splice(0, this.size)
      },
      //改变当前页数
      handleSizeChange(val) {
        // 只要换页数就直接返回1页
        this.size = val
        this.current = 1
        this.pageList = this.tableData.slice(0, this.size)
      },
      // 改变当前页码
      handleCurrentChange(val) {
        this.current = val
        //如果页码为1,就正常切割
        if (val == 1) {
          this.pageList = this.tableData.slice(0, this.size)
          return
        }
        // 当前页码不为1时
        val = (val - 1) * this.size
        this.pageList = this.tableData.slice(val, val + this.size)
      },
    },
  }
</script>

以上就是实现代码!