CommonQueryTable 查询表格

CommonQueryTable 是一个组合型列表组件，把查询表单、数据表格和分页统一收敛到一个组件里，适合中后台列表页快速落地。

主要特性：

• 内置查询表单、表格和分页联动逻辑
• 通过 fetch 统一管理列表请求
• 支持布局插槽和子组件插槽透传
• 支持前缀属性 / 事件透传给内部组件
• 通过 ref 暴露常用列表操作方法

基础用法

一个组件同时完成查询表单、表格和分页联动，适合作为后台列表页的默认骨架。

客户名称

合作状态

请选择合作状态

暂无数据

展开代码

复制代码

布局插槽

组件提供以下布局区域：

• header：头部区域
• form：查询表单区域
• toolbar：工具栏区域
• table：表格区域
• pagination：分页区域
• footer：底部区域

仅保留表格 + 分页

如果页面不需要查询区，`CommonQueryTable` 也可以只保留表格和分页区域。

暂无数据

展开代码

复制代码

工具栏

工具栏适合承载新增、导出、批量操作等列表页常见动作。

客户名称

合作状态

请选择合作状态

暂无数据

展开代码

复制代码

页脚补充信息

页脚区域可放置统计摘要、说明文案或补充操作，适合复杂列表页。

客户名称

合作状态

请选择合作状态

暂无数据

本页共展示 3 条客户数据，合作中客户 2 家，已暂停客户 1 家。

展开代码

复制代码

分页配置

组件内部会自动把 pageNo 和 pageSize 传入 fetch。

分页参数会自动参与列表请求，并支持通过前缀属性透传给内部分页组件。

当前分页：第 1 页 / 每页 10 条

客户名称

合作状态

请选择合作状态

暂无数据

展开代码

复制代码

分页透传属性

可以通过 pagination-* 前缀把属性传给内部 CommonPagination，例如：

• pagination-page-sizes
• pagination-layout
• pagination-background

插槽透传

可以通过带前缀的插槽把内容传给内部子组件：

• form-*：透传给 CommonForm
• table-*：透传给 CommonTable
• pagination-*：透传给 CommonPagination

例如：

• table-status
• table-empty
• pagination-default

通过具名前缀插槽可以定制内部子组件的渲染，例如自定义表格列、空状态或工具栏。

客户名称

已暂停

暂无数据

展开代码

复制代码

属性与事件透传

通过带前缀的属性和事件，可以精细控制内部组件行为：

• 属性透传：:form-inline="false"
• 事件透传：@table-selection-change="handleSelectionChange"

带前缀的属性和事件会自动透传到内部组件，便于精细控制表单和表格行为。

客户名称

合作状态

请选择合作状态

暂无数据

展开代码

复制代码

API

Props

参数	说明	类型
fetch	列表请求函数	(params?: ListParam) => Promise<{ list: T[]; total: string | number }>
form	查询表单配置数组	CommonFormItemArray<T>
columns	表格列配置	CommonTableColumn<T>

Slots

布局插槽

名称	说明
header	页面头部区域
form	查询表单区域
toolbar	工具栏区域
table	表格区域
pagination	分页区域
footer	页面底部区域

子组件透传插槽

• form-*：透传给内部 CommonForm
• table-*：透传给内部 CommonTable
• pagination-*：透传给内部 CommonPagination

Exposes

方法	说明
refresh	使用当前条件刷新列表
reset	重置查询条件和分页并重新获取列表
getFormData	获取当前表单数据
getSelectionRows	获取当前选中行

TypeScript 类型

import type {
  CommonQueryTableProps,
  CommonQueryTableExpose,
} from '@yetuzi/vue3-query-components'

interface CommonQueryTableProps<T = AnyObject> {
  fetch: (params?: ListParam) => Promise<{ list: T[]; total: string | number }>
  form?: CommonFormItemArray<T>
  columns: CommonTableColumn<T>
}

interface CommonQueryTableExpose<T = AnyObject> {
  refresh: () => void
  reset: () => void
  getFormData: () => Partial<T>
  getSelectionRows: () => T[]
}