vue3 + ElementPlus 封装列表表格组件包含分页

在前端开发中，封装组件是必不可少的。今天就来封装一个通用的列表表格组件，包含分页功能，可以提高代码的复用性和可维护性。

1. 组件设计

 Props：

• tableData：表格数据。
• columns：表格列配置。
• total：总条数。
• loading：加载状态。
• pagination：分页配置（当前页、每页条数）。

Events：

• update:pagination：分页变化时触发。
• refresh：刷新数据时触发。

Slots：

• 自定义列内容。
• 自定义操作按钮。

2. 封装代码

TableWithPagination.vue

3. 使用示例 

父组件中使用 TableWithPagination以上就是封装 Vue 3 和 Element Plus 中封装一个通用的列表表格组件，将表格和分页逻辑封装在一个组件中，便于维护和扩展。