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