基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      :max-height="tableMaxHeight"
      style="width: 100%;">
      <el-table-column
        v-for="item in tableColumns"
        :prop="item.prop"
        :label="item.label"
        :key="item.prop"
        :min-width="item.minWidth">
      </el-table-column>
    </el-table>
    <pagination
      :pagination="pagination"
      @currentChange="currentChange"
      @sizeChange="sizeChange">
    </pagination>
  </div>
</template>
 
<script>
import Pagination from '@/components/Pagination'
 
export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { prop: 'date', label: '日期', minWidth: 120 },
        { prop: 'name', label: '姓名', minWidth: 120 },
        { prop: 'address', label: '地址', minWidth: 300 }
      ],
      tableMaxHeight: '500',
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 1000
      }
    }
  },
  methods: {
    currentChange(val) {
      console.log('当前页：' + val)
    },
    sizeChange(val) {
      console.log('每页显示条数：' + val)
    }
  }
}
</script>

这个代码实例展示了如何在Vue项目中使用ElementUI的el-table和自定义的pagination组件来实现表格数据和分页的功能。pagination组件是一个封装了ElementUI的el-pagination组件的自定义组件，用于处理分页的逻辑和事件。这个例子简洁明了，并且提供了基本的分页和表格功能。