ant design of vue分页/layui实现分页

huanxiangcoco

已于 2024-10-19 13:38:58 修改

阅读量1.4k

点赞数

分类专栏： ant design of vue之所遇到的坑文章标签： vue.js layui javascript

于 2020-09-11 11:44:05 首次发布

本文链接：https://blog.youkuaiyun.com/huanxianxianshi/article/details/108531283

版权

ant design of vue之所遇到的坑专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Ant Design Vue和Layui两种框架实现分页功能。对于Ant Design Vue，详细引用了官方文档并提供了相关代码；而对于Layui，同样给出了官方文档链接和对应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design of vue分页

官方文档：https://www.antdv.com/components/pagination-cn/

结果：

在这里插入图片描述

代码：

 <a-pagination
                  v-if="testData != undefined && testData.length > 0"
                  show-quick-jumper
                  :default-current="this.q.pi"
                  :defaultPageSize="this.q.ps"
                  :total="this.total"
                  @change="onChange"
                />
                
import axios from "axios";

data() {
    return {
      total: 0, //数据总数
      testData: [],
      //参数
      q: {
        pi: 1,
        ps: 10
      },
    };
  },
   mounted() {
    this.loads();
  },
methods: {
    loads () {
      axios
        .get(接口, this.q)
        .then((r) => {
          this.testData = r.data.Result.Data;
          this.total = r.data.Result.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onChange(pageNumber) {
      //分页
      this.q.pi = pageNumber;
      this.loads();
    }

layui实现分页

官方文档 https://www.layui.com/doc/modules/laypage.html

结果：
在这里插入图片描述
代码：

 <div id="page3" class="justify-content-center"></div>

import axios from "axios";

data() {
    return {
      total: 0, //数据总数
      testData: [],
      q: {
        pi: 1,
        ps: 10,
      },
    };
  },
  methods: {
    loads: function () {
      axios
        .get(接口, this.q)
        .then((r) => {
          this.testData =r.data.Result.Data;
          this.total = r.data.Result.total;
          this.layFun();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    layFun() {
      var This = this;
      layui.use(["laypage"], function () {
        var laypage = layui.laypage;
        laypage.render({
          elem: "page3",
          limit: This.q.ps,
          count: This.total, //数据总数，从服务端得到
          layout: ["prev", "page", "next", "skip"],
          jump: function (obj, first) {
            if (!first) {
              This.q.pi = obj.curr;
             axios
                .get(上个接口, This.q)
                .then((r) => {
                  if (r.Success) {
                    This.testData = r.data.Result.Data;
                    This.total = r.data.Result.total;
                  } else {
                    this.$message.error(r.Msg || "获取数据失败，未知错误");
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          },
        });
      });
    },
    }