(vue)antd添加分页获取数据

最新推荐文章于 2024-07-06 12:09:51 发布

nyf_unknown

最新推荐文章于 2024-07-06 12:09:51 发布

阅读量264

点赞数

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

本文链接：https://blog.csdn.net/qq_44754635/article/details/125441212

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

本文展示了如何在Vue项目中结合Ant Design库实现分页功能，通过调用`GetgetReceivePage`方法获取数据，更新表格内容，并在分页组件``上设置监听事件以实现页面变化时的数据刷新。

摘要由CSDN通过智能技术生成

(vue)antd添加分页获取数据

效果：

在这里插入图片描述

    <!-- 表格区 -->
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 1300 }"
      :row-selection="rowSelection"
      rowKey="id"
      :pagination="false"
    >
      <a slot="action" slot-scope="text" href="javascript:;">
        <span @click="changeTube(text)">修改</span>&nbsp;&nbsp;&nbsp;
        <span @click="delTube(text)">删除</span>
      </a>
    </a-table>
    <a-pagination
      :total="total"
      :show-total="(total) => `总条数${total}条`"
      :page-size="10"
      :default-current="pageNum"
      style="margin: 10px"
      @change="pageChange"
    />


methods: {
    //查询
    onSubmit() {
      GetgetReceivePage({ ...this.lngTakeForm, pageNum: this.pageNum, pageSize: 10 }).then((res) => {
        if (res.code == 0) {
          this.data = res.page.rows
          this.total = res.page.total
        } else {
          this.$message.error('系统错误，稍后查询')
        }
      })
    },
    //分页
    pageChange(page) {
      this.pageNum = page
      this.onSubmit()
    },

}