ProTable - 高级表格

基于 ant-design-vue 的 Table 组件二次封装，并将 QueryFilter 及部分表格常用功能封装成组件

基本用法

一个基本的例子

无查询表格

不带查询条件的表格

自定义工具栏

能够对工具栏的内容自定义，默认的设置配置key即可

筛选和排序

需要对表格进行筛选和排序

搜索项插槽

使用插槽自定义搜索项

简单的例子

常见的列表展示页的组装例子

API

仅列出额外功能的API，原有 Table API请访问 Ant Design Vue 官网.

属性

属性	说明	类型	默认值
request	请求表格数据的方法	(arg: QueryData<T>, filters?: Filters, sorter?: Sorter<RecordType>) => Promise<RequestData>	-
params	搜索条件初始值	Record<string, any>	{}
columns	Table 组件同名参数，在原有的基础上增加额外配置	ProSchema[]	[]
columnsState	初始columns展示配置（注意：持久化配置暂未开发）	ColumnsStateType	{}
search	搜索条件配置，传递给 QueryFilter 的 props，为 false 不展示	QueryFilterProps | boolean	false
toolbar	工具栏配置，为 false 不展示	ToolBarProps | boolean	true
toolbar.title	工具栏左侧展示的标题	string	-
toolbar.settings	工具栏具体内容，默认工具栏的key：reload，density，setting，fullScreen	ToolBarSetting[]	-
beforeSearchSubmit	调用请求表格数据前，处理参数的回调	(params: T) => U	-
postData	获取表格数据后，赋值给表格组件前，处理数据的回调	(data: T[]) => U[]	-
cardBordered	是否展示组件外边框	boolean	false
autoHeight	根据父节点自适应高度，通过 { offset: 0 } 可设置偏移量	AutoHeight | boolean	false
manualRequest	是否需要手动触发首次请求	boolean	false

暴露

方法或属性	说明	类型
reload	请求第一页表格数据	()=> void
fetch	重新加载当前表格页数据	()=> void
reset	重置筛选条件并重新请求	()=> void
query	搜索数据	Ref<QueryData>
setQuery	设置搜索数据	(query: QueryData) => void
tableSize	表格尺寸	Ref<"small" | "middle" | "large">
setTableSize	设置表格尺寸	(tableSize: "small" | "middle" | "large") => void
columnsMap	列展示配置	Ref<Record<string, ColumnsState>>
setColumnsMap	设置列展示配置	(columnsMap: Record<string, ColumnsState>) => void
computeTableHeight	重新计算表格高度	()=> void

插槽

在 Table 和 QueryFilter 的 slot 上增加了以下插槽

名称	说明	类型
toolbar	表格标题位置的插槽	{}
tools	工具栏的插槽内容	{}
formItem	自定义筛选条件项	{ record: any, column: ProTableColumn }

Type Declarations

export interface ToolBarSetting {
  icon?: any
  tooltip?: string
  key?: string
  onClick?: (key?: string) => void
}

export interface ColumnsStateType {
  /* 持久化的类型，支持 localStorage 和 sessionStorage */
  persistenceType?: 'localStorage' | 'sessionStorage'
  /* 持久化的key，用于存储到 storage 中 */
  persistenceKey?: string
  /* ColumnsState 的值 */
  defaultValue?: Record<string, ColumnsState>
  /* ColumnsState 的值 */
  value?: Record<string, ColumnsState>
  onChange?: (map: Record<string, ColumnsState>) => void
}

export interface ColumnsState {
  show?: boolean
  fixed?: 'right' | 'left' | undefined
}

export interface AutoHeight {
  offset?: number
}

interface ToolBarProps {
  settings?: ToolBarSetting[] | undefined
  title?: string | undefined
}

export type QueryData<T extends Recordable = any> = {
  current?: number
  pageSize?: number
} & T