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)
            };