Vue 纯前端解决分页效果 实现代码

html：

 <div class="pagination-panel">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[10, 20,50, 100]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        next-text="下一页"
        prev-text="上一页"
      ></el-pagination>
    </div>

 

 

JS

<script>
export default {
  data() {
    return {
      pageSize: 10,
      totalSize: null,
      index: 1,
      tableData: [],//el-table  绑定的数据
      tableDataALL: [],//所有返回的数据  处理后赋值到tableData
      time: [], // 时间 yyyy-MM-dd hh:mm:ss
    };
  },

  methods: {
    getList() {
      this.tableData = this.tableDataALL.filter(
        (item, index) =>
          index < this.index * this.pageSize &&
          index >= this.pageSize * (this.index - 1)
      );
      this.totalSize = this.tableDataALL.length;
    },
    /**
     * @name: 分页
     */
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.index = val;
      this.getList();
    },
  },
};
</script>