el-pagination分页的具体使用

爱吃羊的狗

已于 2023-03-01 10:43:12 修改

阅读量242

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-14 16:28:17 首次发布

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/129029210

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

el-pagination分页的具体使用

<el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :page-size="page.pageSize"
          layout="prev, pager, next, jumper"
          :total="page.totalResult"
        >
        </el-pagination>

page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },

async getData() {
      const params = {
        currentPage: this.page.currentPage,
        size: this.page.pageSize,
        model:this.input,
      };
      const res = await getU(params);
      console.log(res, "res");
      if (res.data.code == 200) {
        this.tableData = res.data.data.records;
        this.page.totalResult = res.data.data.total;
      }
    },
     // 条数发生变化
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getData();
    },
    // 页数发生变化
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getData();
    },