Vue项目中使用elementUI之Pagination分页组件

简述

elementUI中的组件本身是已经经过封装的便于开发，但是由于项目使用次数过多，为了更简便的统一使用将其进行封装复用。

初学者可参考官方文档

初学者可参考官方文档学习简单示例

封装组件

• 子组件封装分页组件
  Pagination.vue

<template>
  <!-- 分页组件 -->
  <!-- size-change（每页条数）    pageSize 改变时会触发 -->
  <!-- current-change（当前页）  currentPage 改变时会触发 -->
  <!-- page-size    每页显示条目个数，支持 .sync 修饰符 -->
  <!-- page-sizes   每页显示个数选择器的选项设置 -->
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[1, 2, 5, 10]" :page-size="pageSize" :layout="layout" :total="total">
  </el-pagination>
</template>

<script>
  export default {
    props: {
      currentPage: {
        type: [String, Number],
        default: 1
      },
      total: {
        type: [String, Number],
        default: 0
      },
      pageSizes: {
        type: Array,
        default: () => ([10, 15, 30, 50]),
      },
      pageSize: {
        type: [String, Number],
        default: 10
      },
      // prev表示上一页，next为下一页，pager表示页码列表,jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量
      // total, sizes, prev, pager, next, jumper
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      }
    },
    data() {
      return {}
    },
    methods: {
      handleSizeChange(val) {
        // 子组件向父组件传值
        this.$emit('sizeChange', val)
      },
      handleCurrentChange(val) {
        this.$emit('currentChange', val)
      }
    }
  }
</script>
<style lang="less" scoped>
  .page {
    text-align: center;
    color: #409EFF;
  }
</style>

• 父组件 引用子组件
  PageTest .vue

<template>
 <Pagination @sizeChange='handleSizeChange' 
    :pageSize='pageSize' 
    @currentChange='handleCurrentChange'
      :currentPage='currentPage' :total='total'></Pagination>
</template>

<script>
  import qs from 'qs'
  import Pagination from '@/components/utils/Pagination'

  export default {
    components: {
      Pagination,
    },
    data() {
      return {
        globalList: [],
        // 当前页数量
        pageSize: 1,
        // 当前页
        currentPage: 1,
        // 总数
        total: 1,
        tag: '国内快讯TOPS',
      }
    },
    created() {
      this.getNewsList(this.tag)
    },

    methods: {
      getNewsList(tagName) {
        console.log(tagName)
        const param = {
          'page': this.currentPage,
          'size': this.pageSize,
          'tag': tagName
        }
        this.$axios({
          url: "/api/art/findTag", //请求地址
          method: "post", //请求方式
          data: qs.stringify(param)
        }).then(ok => {
          // ok表示请求成功的数据
          console.log(ok)
          // 把请求到的数据给testDatas数组
          this.globalList = ok.data.data.list
          // 当前页数
          this.currentPage = ok.data.data.pageNum
          // 当前页数量
          this.pageSize = ok.data.data.pageSize
          // 分页总数
          this.total = ok.data.data.total
          console.log(JSON.stringify(ok.data.data.total))
        });
      },
      // 监听 pagesize改变的事件
      handleSizeChange(newSize) {
        //  console.log(`每页 ${val} 条`);
        console.log(newSize)
        this.pageSize = newSize
        this.getNewsList(this.tag)
      },
      // 监听 页码值 改变事件 第几页
      handleCurrentChange(newSize) {
        //  console.log(`当前页: ${val}`);
        console.log("111:" + newSize)
        this.currentPage = newSize
        this.getNewsList(this.tag)
      },
    },
  }
</script>