标准答案
- 表格状态通常包括 filters、page、pageSize、sortBy、sortOrder 和关键视图选项。
- URL query 适合保存用户可分享、可恢复的查询状态，例如关键字、筛选项、页码和排序。
- 内部 UI 状态和请求参数要有明确转换层，避免组件库事件格式直接散落到接口调用里。
- 筛选条件变化通常要重置 page 到第一页，排序和页码变化则触发重新请求。
- 要处理防抖搜索、请求竞态、空态、错误态、加载态和浏览器前进后退恢复。
题目解析
表格页的核心不是把 ElTable 渲染出来，而是状态同步。状态散落后，最容易出现 URL、表单、分页器和接口参数互相不一致。
URL 同步要避免无限循环：watch route 更新本地状态，本地状态变化再 replace query 时，需要规范化和比较。
复杂表格可以把 query state、fetch state、selection state 拆开管理，避免一个组件承担所有职责。
代码示例
下面展示了把表格状态转成路由 query 的简化方式。
TypeScript
const tableQuery = reactive({
keyword: '',
page: 1,
pageSize: 20,
sortBy: 'createdAt',
sortOrder: 'desc'
})
watch(
() => ({ ...tableQuery }),
query => {
router.replace({
query: normalizeTableQuery(query)
})
},
{ deep: true }
)常见误区
- 筛选、分页、排序分别维护状态，最后接口参数和 URL 不一致。
- 搜索框每输入一个字都立即请求，没有防抖、取消或竞态处理。
- URL query 只写不读，刷新页面后筛选状态丢失。