vue封装分页组件Pagination

本篇讲述在vue项目中封装ElementUI的分页组件Pagination

以下是子组件，即分页组件的内容

<template>
  <div>
    <el-pagination
      class="pagin"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :page-sizes="[10 , 20, 30, 40]"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      :hide-on-single-page="hidden"></el-pagination>
  </div>
</template>

<script>
export default {
  // props: ['total', 'pageSize', 'currentPage', 'handleSizeChange', 'handleCurrentChange'],
  props: {
    'total': Number,
    'pageSize': Number,
    'currentPage': Number,
    'handleSizeChange': Function,
    'handleCurrentChange': Function
  },
  data () {
    return {
      // 分页数据
      hidden: true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
</style>

在父组件中使用：

<!-- 组件的使用 -->
<Pagin
  :total="total"
  :pageSize="pageSize"
   :currentPage="currentPage"
   :handleSizeChange="handleSizeChange"
   :handleCurrentChange="handleCurrentChange"></Pagin>

<script>
// 1.首先要引入组件
import Pagin from '../public/Pagination'
import { getTableData } from '../../api/api'
export default {
// 2.然后注册组件
  components: {
    Pagin
  },
  // 这两步不太清楚的可以看官网或者自行百度
  data () {
    return {
      searchInfo: {
        username: ''
      },
      tableData: [],
      // 定义分页数据
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      currentPage: 0 // 当前页数
    }
  },
  async created () {
    await this.getData(this.pageSize, this.currentPage)
  },
  methods: {
  	// 改变当前页数函数
    handleCurrentChange (val) {
      this.getData(this.pageSize, val - 1)
    },
    // 每页多少条
    handleSizeChange (val) {
      this.getData(val, this.currentPage)
    },
    // 获取表格数据
    getData (sizes, pages) {
      getTableData(this, 'tableData', 'user/customer', this.searchInfo, {}, sizes, pages)
    }
  }
}
</script>