一、创建通用型表格的需求

实现一个通用型表格组件，具备以下功能：

1. 动态列配置。
2. 分页功能。
3. 排序功能。
4. 可扩展的行操作功能。

二、设计通用型表格组件

首先，需要设计一个基础的表格组件，它接受列配置、数据和分页信息等参数。

1. 创建 useTable Hook

在 src/hooks 目录下创建 useTable.js 文件：

2. 创建 TableComponent.vue

在 src/components 目录下创建 TableComponent.vue 文件：

三、使用通用型表格组件

在实际项目中，可以这样使用这个通用型表格组件：

1. 创建 ExampleTable.vue 组件

在 src/views 目录下创建 ExampleTable.vue 文件：

四、解释代码

1. 定义 useTable Hook ：

   • 使用 Vue 的 ref 和 reactive 定义表格状态。
   • 定义 loadData 、 changePage 、 changePageSize 和 changeSort 函数来处理数据加载和分页、排序变化。
   • 使用 onMounted 生命周期钩子在组件挂载时加载数据。

2. 定义 TableComponent 组件 ：

   • 接受 fetchData 和 columns 作为组件属性。
   • 使用 useTable Hook 获取表格数据和操作函数。
   • 渲染表格头部、主体和分页组件，并绑定相关事件。

3. 使用通用型表格组件 ：

   • 在 ExampleTable.vue 中定义列配置和数据获取函数。
   • 使用 TableComponent 并传递 fetchData 和 columns 属性。