vue封装分页组件

element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求

分页组件

<!--分页组件-->
<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentpage"
    :page-sizes="[20, 50, 100]"
    :page-size="pagesize"
    :layout="layout"
    :total="total">
  </el-pagination>
</template>
<script>
  export default {
    name: 'Pagination',
    props: {
      pagesize: [Number, String],
      currentpage: [Number, String],
      total: [Number, String],
      options: [Object],  // 分页发生变化赋值给options
      render: [Function], // 跳转触发的请求
      layout: {
        type: String,
        default: 'sizes, prev, pager, next'
      }
    },
    methods: {
      handleSizeChange(val) {
        this.options.page = 1;
        this.options.pageNum = val;
        this.render();
      },
      handleCurrentChange(val) {
        this.options.page = val;
        this.render();
      }
    }
  };
</script>

其他页面调用

1.引入组件

<pagination

v-if="pageTotal.total>pageTotal.pageSize"

:currentpage="pageTotal.page"

:total="pageTotal.total"

:pageSize="pageTotal.pageSize"

:render="getData"

layout="prev, pager, next"

:options="pageOption">

</pagination>

import Pagination from '../common/Pagination';
export default {
  components: {
    'pagination': Pagination
  },

     //分页数据
      pageTotal: {
        total: 0,
        pageNum: 10,
        page: 1
      },

}

2,发送请求获取到后台分页信息后赋值

          this.pageTotal = {
              total: res.data.response.result.total,
              page: parseInt(res.data.response.result.page),
              pageNum: parseInt(res.data.response.result.pageNum)
            };