vue之 分页封装

npm 下载 npm i element-ui -S

components

创建 Page 文件夹

创建 Page.vue 文件

vue 文件

<template>

  <div class="page">

    <el-pagination

      small

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="page.currentPage"

      :page-sizes="[10, 20, 50, 100]"

      :page-size="page.pageSize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

    ></el-pagination>

  </div>

</template>

 

<script>

export default {

  props: ["total"],

  data() {

    return {

      // 页码参数

      page: {

        currentPage: 1,

        pageSize: 10,

      },

    };

  },

  methods: {

    handleSizeChange(val) {

      this.page.pageSize = val;

      this.$emit("pageChange", this.page);

    }

  },

};

</script>

 

 

//用到分页的vue文件

template 部分

<page :total="page_total" @pageChange="pageChange"></page>

 

script 部分

import Page from "../Page/page"

 

components: {

        page: Page

    },

 

//分页

            page_total: 100, //总数

            page_index: 1, //页码

            page_size: 10 //每页展示条数

 

methods 方法

 

hpageChange(item) {

            this.page_index = item.currentPage;

            this.page_size = item.pageSize;

　　　　this,getList() //传后台要的分页数据过去。

        }