vue基于element二次封装table表格和pagination分页组件到一个组件里面并进行使用

在实际开发vue管理系统项目过程中，开发者总需要用到表格数据和分页的功能，作者在这里基于element将table和pagination封装为一个分页表格组件，并且提供使用示例。开发者也可以根据自己实际开发功能进行优化提升。

直接贴代码：

封装组件 Pagination.vue

<div>
  <el-table height="520" :data="tableData" style="width: 100%" border>
    <template v-for="(item, index) in columnData">
      <el-table-column
        :prop="item.prop"
        :key="index"
        :label="item.label"
      >
      </el-table-column>
    </template>
  </el-table>
  <el-pagination
    class="pg"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pagesize"
    :total="total"
    background
  ></el-pagination>
</div>

props: {
  // 分页数据总数
  total: {
    type: Number,
    default: 1000,
    required: false
  },
  // 单页数据量
  pagesize: {
    type: Number,
    default: 10,
    required: false
  },
  // 当前页码
  currentPage: {
    type: Number,
    default: 1,
    required: false
  },
  // 表格数据
  tableData: {
    type: Array,
    default: [],
    required: false
  },
  // 表头数据
  columnData: {
    type: Array,
    default: [],
    required: false
  }
},
methods: {
  // 以下两个函数均是触发父组件的handleChange事件，从而实现点击分页的功能按钮后，子组件向父组件传参
  handleCurrentChange: function (currentPage) {
    this.$emit('handleChange', this.pagesize, currentPage)
  },
  handleSizeChange: function (pageSize) {
    this.$emit('handleChange', pageSize, this.currentPage)
  }
}

.pg {
  margin: 20px;
  text-align: right;
}

使用组件示例:

<div class='pg-div'>
  <f-pagination
    :columnData="columnData"
    :tableData="tableDataList"
    :total="totalNum"
    :pagesize="pagesizeNum"
    :currentPage="currentPageNum"
    @handleChange="handleChangeData"
  ></f-pagination>
</div>

// 引用分页表格组件
import FPagination from '@/components/blog/pagination/Pagination.vue'
// 引入mock数据
import { tableData, columnData } from './mockData.js'
export default {
  components: {
    'f-pagination': FPagination
  },
  data () {
    return {
      tableData, // 表格全部数据，引用于mock数据
      columnData, // 表头数据，引用于mock数据
      tableDataList: [], // 分页后的表格数据
      totalNum: 24, // 数据总数
      pagesizeNum: 10, // 单页数据量
      currentPageNum: 1 // 当前页码
    }
  },
  methods: {
    // 获取子组件传来修改后的pagesize和currentPage，改变数据页码或每页条目，进而请求新数据
    handleChangeData (pagesize, currentPage) {
      this.pagesizeNum = pagesize
      this.currentPageNum = currentPage
      this.getNewData()
    },
    // 实际请求后端数据函数，修改表格数据
    getNewData () {
      // 这里请自行更改为请求表格数据，并赋值给tableDataList；这里作者为了方便查看对mock数据做了假分页
      this.tableDataList = this.tableData.slice((this.currentPageNum - 1) * this.pagesizeNum, this.currentPageNum * this.pagesizeNum)
    }
  },
  created () {
    this.getNewData()
  }
}

.pg-div {
  margin: auto;
  width: 80vw;
}

线上代码

效果展示：