vue+ elementUI 自封装分页插件

最新推荐文章于 2024-06-25 14:51:49 发布

原创最新推荐文章于 2024-06-25 14:51:49 发布 · 1.4k 阅读

7 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

5 篇文章

订阅专栏

项目中多处使用ElementUI分页，为避免重复代码，将分页封装成公共模块。介绍了封装Pagination的步骤，包括新建页面及代码说明，还说明了在页面调用的方法，如引入组件、调用及相关参数设置等，让代码更简洁。

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

elementUI提供了一套很好的分页解决方案，但是项目中很多地方使用，每次要写重复代码，不够解耦合，于是考虑把分页单独提出来作为一个公共模块，使用时直接调用，代码更简洁好看

一.封装Pagination：

新建一个Pagination.vue页面，代码如下

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20, 40]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</template>
<script>
export default {
  name: "Pagination",
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      total: 0,
      pagesize: 5,
      currentPage: 1
    };
  },
  mounted() {
    this.reload();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      this.reload();
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.reload();
    },
    reload() {
      this.$Axios.post(
        this.url,
        { page: this.currentPage, size: this.pagesize },
        res => {
          if (res.data.success) {
            this.$emit("childByValue", res.data.data);
            this.total = res.data.count;
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          }
        }
      );
    }
  }
};
</script>

说明如下：1.JS中this.$Axios.post换成你自己的访问后台api方法

2.参数page,size也是你自己后台定义的接受分页参数名称

3.返回类型res结构相应要改成你自己返回数据的格式

二.页面处调用

1.引入Pagination.vue

import Pagination from "@/components/Pagination.vue";
components: {
    Pagination
  }

2.调用

 <Pagination url="user/query" v-on:childByValue="childByValue"/>

调用说明：1.url对你的你请求后台的路径

2.v-on接受 Pagination传递过来的childByValue值

3.定义方法，接受childByValue值

childByValue(childValue) {
      this.usersData = childValue;
    }

此处userData是你页面接受展示table页面是数组