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>