前端分页（适合数据量小的情况）

当遇到后端不想分页然后数据量不大的情况：

<!--这里的paginatedData就是根据list进行切割的计算属性-->
<el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" label="序号" width="60" header-align="center" align="center"> </el-table-column>
    <el-table-column prop="name" label="名称" min-width="130"> </el-table-column>
    <el-table-column prop="state" label="状态" min-width="120"> </el-table-column>
</el-table>     
<!--这里的pagination分页组件不需要做任何改动-->
<div class="pagination-container">
        <el-pagination background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="listQuery.page" 
        :page-sizes="[1, 3, 5]" 
        :page-size="listQuery.pageNum" 
        layout="->,total, sizes, prev, pager, next, jumper" 
        :total="totalNum"> </el-pagination>
</div>
<script>
export default {
  data() {
    return {
      list: [], //后端接口给的列表数据（未分页，全部返回）
      listQuery:{
          page:1,
          pageNum:10      
      }
    }
  },
  created() {
    //请求后端数据
    this.getList();
  },
  computed: {
    // 使用前端实现分页的计算数据
    tableData() {
      // 分页的起始下标
      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() {
      //调用后端接口
      listApi().then((res) => {
        this.list = res.data;
      });
    },
    // 每页列表数
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
    },
    // 当前分页数（第几页）
    handleCurrentChange(val) {
      this.listQuery.page = val;
    },
  }
}    
</script>

如果数据量大是不建议这样的，首先要请求大数据然后在分页影响性能，这时候就需要去打一顿后端让他做分页了，性能好还方便