通用表格组件解耦数据获取与UI控制，仅负责渲染表格、联动分页、透传筛选参数；父组件决定请求逻辑和搜索表单结构，并通过request函数和#search插槽接入。
直接封装一个带分页和搜索的通用表格组件，核心不是堆功能，而是把“数据获取”和“UI控制”解耦，让每个页面只关心业务逻辑，不重复写请求、分页、表单重置这些样板代码。
明确组件职责边界
通用表格组件不负责发起请求，也不管理搜索表单结构，只做三件事：渲染表格、联动分页、透传筛选参数。数据怎么来、表单长什么样，由父组件决定。
- 表格内部只暴露 request 函数接口（接收 { page, size, ...filters }，返回 Promise）
- 搜索表单用插槽（
<template #search>）交给父组件自由实现，组件只提供“触发搜索”和“重置”两个方法 - 分页器状态（current-page / page-size）由组件内部维护，但变更时通过
@update:pagination抛出，方便父组件做缓存或联动
关键 Props 设计
组件接收的配置应聚焦可变部分，避免把 Element Plus 原生属性全透传，反而增加理解成本：
-
columns：数组，每项含
label、prop、width、align，支持slots字段指定插槽名（如"status"对应#status） -
request：必传函数，签名
(params: { page: number; size: number; [key: string]: any }) => Promise<{ list: any[]; total: number }> -
searchConfig：轻量配置，仅用于控制是否显示“搜索/重置”按钮（
showSearchBtns: boolean），不接管表单字段 -
height、border、stripe 等视觉类 props 直接透传给
<el-table>
分页与搜索联动逻辑
用户点“搜索”或改分页时，都应重置到第一页；点“重置”则清空所有筛选参数并刷新。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 内部用
ref存当前分页参数（{ page: 1, size: 10 }）和筛选对象（{ keyword: '', status: '' }） - 调用
request前自动合并两者：request({ ...pagination, ...searchParams }) - 提供
search()和reset()方法供父组件调用（比如在搜索表单的 @submit 里） - 分页器
@size-change和@current-change触发后，仅更新内部 pagination，不立即请求——等下次 search() 才执行
使用示例（父组件中）
真正用起来非常轻量，几行就能搭出完整列表页：
<EasyTable
ref="tableRef"
:columns="columns"
:request="fetchUserList"
:height="500"
show-search-btns
/>
<template #search>
<el-form :inline="true" :model="searchForm">
<el-form-item label="用户名">
<el-input v-model="searchForm.username" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status">
<el-option label="全部" :value="null" />
<el-option label="启用" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="tableRef.search()">搜索</el-button>
<el-button @click="tableRef.reset()">重置</el-button>
</el-form-item>
</el-form>
</template>
其中 fetchUserList 就是一个纯请求函数，只管发请求、返回数据，不用操心 loading、错误、分页参数拼接。
