vue前端实现分页逻辑

在前端实现分页逻辑

  <el-pagination @size-change="sizeChange" @current-change="currentChange"
                         :current-page="page" :page-size="size" :page-sizes="pageSizes"
                         layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>

data() {
    return {
      page: 1, //第几页
      size: 3, //一页多少条
      total: 0, //总条目数
      pageSizes: [3, 5, 10],
  
      tableData: [],
      allData: [],
      
    }

js中分页方法

getTabelData2() {
      let data=JSON.parse(JSON.stringify(this.allData))
      this.tableData = data.splice(
          (this.page - 1) * this.size,
          this.size
      );
      this.total = this.allData.length
    },
    currentChange(val) {
      this.page = val;
      this.getTabelData2();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      this.size = val;
      this.page = 1;
      this.getTabelData2();
    },

加载完就运行的方法

mounted() {
     axios({
        method: "get",
        url: "http://localhost:7000/xin"
      }).then((res) => {
        this.tableData = res.data;
         this.allData = this.tableData;
        this.getTabelData2();
      });
    }
  },