Vue项目的分页组件封装

Vue2项目的分页组件封装

elementui组件的分页封装

<template>
  <el-row class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      :page-sizes="$store.getters.pagination.page_sizes"
      @current-change="toPage"
      :current-page.sync="mPage"
      :page-size="mPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-row>
</template>

<script>
export default {
  name: 'mPagination',
  props: {
    total: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      // 默认页码是1，每页数量是10
      mPage: 1,
      mPageSize: this.$store.getters.pagination.pageSize,
    };
  },
  watch: {
    total(val) {
      if (this.mPage > 1) {
        let maxPage = Math.ceil(val / this.mPageSize);
        if (maxPage < this.mPage) {
          this.$emit('handleFn', {
            pageSize: this.mPageSize,
            page: maxPage,
          });
        }
      }
    },
  },
  methods: {
    handleSizeChange(pageSize) {
      this.mPage = 1; // 改变每页的数据条数，就重置到第一页
      this.$emit('handleFn', {
        pageSize,
        page: 1,
      });
    },
    toPage(page) {
      this.$emit('handleFn', { page });
    },
    setData(page) {
      this.mPage = page;
      this.toPage(page);
    },
  },
};
</script>

在页面中使用

<m-pagination ref="page" :total="total" @handleFn="handleFn"></m-pagination>

methods: {
    search() {
      this.$refs.page.setData(1);
    },
    handleFn(obj) {
      Object.assign(this.formData, obj);
    },
},

Vue3项目的分页组件封装

element plus组件的分页封装

<template>
  <el-row class="pagination">
    <el-pagination :current-page="mPage" :page-size="mPageSize" @current-change="toPage" background="true"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange">
    </el-pagination>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits();

defineProps({
  total: {
    type: Number,
    required: true,
  },
})

// 页码
let mPage = ref(1);
let mPageSize = ref(10);

// 页数
const handleSizeChange = (pageSize) => {
  mPageSize.value = pageSize;
  emit('handleFn', {
    pageSize,
    page: 1,
  })
}

// 选择页码
const toPage = (page) => {
  mPage.value = page;
  emit('handleFn', { page });
}

// 筛选重置页码
const setData = (page) => {
  mPage.value = page;
  toPage(page);
}

// 输出组件的方法，让外部组件可以调用
defineExpose({
  setData,
})
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}
</style>

在前台页面上使用

<m-pagination ref="page" :total="state.pageInfo.total" @handleFn="handleFn"></m-pagination>

// 重置分页
let page = ref();

// 查询条件初始化页码
const getSearch = () => {
  page.value.setData(1);
}

// 获取组件返回的页数或者页码
const handleFn = (obj) => {
  Object.assign(state.pageInfo, obj);
};

这些组件都可以在Vue项目中被封装，并在不同的页面中被重复使用，提高了开发效率和代码复用性。