vue element-ui 做分页功能之封装

在 vue 项目中的 components 中 创建一个 文件夹，文件夹里创建一个 name（这个名字你随意取）.vue

<template>

  <div class="page">

    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page.sync="page.currentPage"

      :page-size="10"

      layout="total, prev, pager, next"

      :total="total">

    </el-pagination>

  </div>

</template>

<script>

export default {

  props: ["total","currentPage"],

  data() {

    return {

      // 页码参数

      page: {

        currentPage: 1,

        pageSize: 10,

      },

    };

  },

  methods: {

    handleSizeChange(val) {

      this.page.pageSize = val;

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

    },

    handleCurrentChange(val) {

      this.page.currentPage = val;

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

    },

  },

  watch:{ // 监听功能：用来监听分页的第几页发生的变化

    currentPage(val,old){

     // console.log(val,old)

      this.page.currentPage=val

    }

  }

};

</script>

 

 

// 在你需要用到这个分页的 vue 文件里进行引用

script

import Page from "../文件夹名字/文件名字" // 自行引用，这个是我的文件路径，别复制进去。 

 

components: {

        page: Page

    },

 

data数据：

//分页

            page_total: '', //总数

            page_index: 1, //页码

            page_size: 10, //每页展示条数，需要的可以自己写上去，我这里并不需要

 

template

<div class="sellPage" v-if="sellPage_total > 10">

     <page :total="sellPage_total" :currentPage="sellPage_index" @pageChange="SellPageChange"></page>

</div>

 

methods：

SellPageChange（）{

　　this.sellPage_index = item.currentPage; //页码

}