封装一个简单的分页组件（ElementUI）

1.在项目的component文件夹下创建名为TablePage的vue文件：

2.使用ElementUI的分页组件：

3.在目标页面引入TablePage组件并使用

<TablePageVue />

import TablePageVue from '../components/TablePage.vue'

export default {
  components: {
    TablePageVue
  },
  ...
}

4.props
父组件传值：

<TablePageVue :data="allData" />
// allData为表格全部的数据 

TablePage组件接收：

props: {
    data: Array
  },

5.$emit
父组件定义方法：

<TablePageVue :allData="allData" @changeTableData="changeTableData" />
// allData为表格全部的数据 
// 声明changeTableData方法，子组件中触发该方法并将值穿给父组件

methods: {
	changeTableData (val) {
	  this.tableData = val
	}
}

TablePage组件中触发在父组件中定义的方法：

this.$emit('changeTableData', this.tableData)
// tableData为当前页所显示的数据，将其传给父组件

6.全部代码

父组件：

<template>
  <div id="tongji">
    <el-table :data="tableData" height="400" border>
      <el-table-column sortable prop="name" label="姓名" fixed="left" width="120"></el-table-column>
      <el-table-column sortable prop="item" label="部门" width="120"></el-table-column>
      <el-table-column sortable prop="age" label="年龄" width="120"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
      <el-table-column sortable prop="status" label="状态" width="120"></el-table-column>
      <el-table-column sortable prop="price" label="工资" width="180"></el-table-column>
      <el-table-column prop="introduce" label="介绍"></el-table-column>
    </el-table>
    <TablePageVue :allData="allData" @changeTableData="changeTableData" />
  </div>
</template>

<script>
import TablePageVue from '../components/TablePage.vue'

export default {
  name: 'tongji',
  components: {
    TablePageVue
  },
  data () {
    return {
      allData: [
        {
          name: "员工1",
          item: "部门1",
          age: 24,
          sex: "男",
          status: 1,
          price: 5000,
          introduce: '123123123'
        },
        {
          name: "员工2",
          item: "部门1",
          age: 24,
          sex: "男",
          status: 1,
          price: 5000,
          introduce: '123123123'
        }
        // ...员工3、4...
      ],
      size: 10,   // 每页显示数量
      currentPage: 1,   // 当前页
      tableData: []   // 当前页显示的数据
    }
  },
  methods: {
    changeTableData (val) {
      this.tableData = val
    }
  }
}
</script>

<style>
</style>

TablePage组件：

<template>
  <div id="tablepage">
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="size"
        layout="total, sizes, prev, pager, next, jumper" :total="allData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tablepage',
  props: {
    allData: Array
  },
  data () {
    return {
      size: 10,
      currentPage: 1
    }
  },
  mounted () {
    this.showTableDate()   // 执行分页的方法
  },
  methods: {
    showTableDate () {   // 分页方法
      this.tableData = []
      this.tableData = this.allData.slice((this.currentPage - 1) * this.size, this.currentPage * this.size)
      this.$emit('changeTableData', this.tableData)
    },
    handleSizeChange (val) {   // 当每页显示数量发生改变时
      this.size = val
      this.showTableDate()   // 执行分页的方法
    },
    handleCurrentChange (val) {   // 当前页发生改变时
      this.currentPage = val
      this.showTableDate()   // 执行分页的方法
    }
  }
}
</script>

<style scoped>
</style>

第一次封装会踩很多坑，所以往简单的方向来，只传入一个全部数据进入分页组件中，还存在很多不足，后期再逐步完善，最终结果：