Table 表格

ElTablePro 的诞生是为了解决项目中需要写很多 Table 的样板代码的问题，所以在其中封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

基础用法

通过配置快速生成表格

请求数据源

request 是 ElTablePro 最重要的 API。它接收 page、pageSize 和 signal，返回值必须包含 data 与 total。

高级筛选

通过 filter 配置开启

自定义筛选字段

ElTablePro 会将 filter-*（* 代表 schema 中的 key）前缀的插槽转发给内部 ElFormPro。下面示例使用插槽自定义搜索项。

自定义列

自定义单元格

在 columns 中配置 slot，然后在组件上提供同名插槽：

渲染函数

除了 slot，也可以在列配置中使用 render，接收 { row, column, $index }，返回 VNode 或文本内容

自定义表头

通过 headerSlot 自定义表头内容

表头渲染函数

表头也可以使用 headerRender。它接收 { column, $index }，返回 VNode 或文本内容

分组表头

通过 children 配置多级表头

表格功能

列配置 autoMerge（建议开启全边框）

通过 autoMerge 自动合并单元格

mergeFields 多级合并（建议开启全边框）

通过 mergeFields 配置多级合并：

未开启 border 的合并（Element Plus 默认无边框）

API

ElTablePro 在 Element Plus 的 Table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 Element Plus Table 不同和部分原始的 API。

Props

属性名	说明	类型	默认值
data	Table 的数据，ElTablePro 推荐使用 request 来加载	`Row[]`	[]
request	远程表数据请求函数	`TableProRequest<Row, Query>`/ `undefined`
query	已应用的检索条件对象	`Query`	{}
filter	筛选表单配置	`TableProFilterConfig<Query>`	`undefined`
columns	列配置	`TableProColumn<Row>[]`	[]
rowKey	行唯一标识	`string` / `(row) => string` / `number`	-
pagination	分页配置，`false` 时隐藏分页	`boolean` \| `TableProPagination`	true
mergeFields	按顺序逐级合并连续同值的字段	`string[]`	[]

更多属性请参考 Element Plus Table。

TableProFilterConfig

属性名	说明	类型	默认值
schema	筛选表单的字段配置	`FormProSchemaItem[]`	-
model	筛选表单的当前值	`Query`	{}
defaultValue	筛选表单的初始值	`Query`	{}
formConfig	筛选表单的布局和折叠配置	`TableProFilterConfigExtension`	-

TableProFilterConfigExtension 在 FormProConfig 基础上增加以下筛选配置：

属性名	说明	类型	默认值
showCollapseButton	是否显示展开/收起按钮	`boolean`	false
collapseRows	收起时显示的行数	`number`	1
collapseCount	收起时显示的字段数量；优先级高于 collapseRows	`number`	-
collapsed	是否默认收起	`boolean`	true

TableProColumn

属性名	说明	类型	默认值
prop	字段名	`string`	-
label	列标题	`string`	-
visible	是否显示列	`boolean`	true
slot	自定义单元格插槽名	`string`	-
headerSlot	自定义表头插槽名	`string`	-
render	使用渲染函数生成单元格内容	`(scope) => VNodeChild`	-
headerRender	使用渲染函数生成表头内容	`(scope) => VNodeChild`	-
autoMerge	当前列是否合并连续同值	`boolean`	false
children	分组表头的子列	`TableProColumn<Row>[]`	-

更多属性请参考 Element Plus Table-column API。

TableProRequest

组件会在初始化、分页变化或调用 reload 时执行它，并使用返回值更新表格与分页总数。

type TableProRequest<Row, Query = Record<string, any>> = (params: {
  page: number | null
  pageSize: number | null
  query: Query
  signal: AbortSignal
}) => Promise<{
  data: Row[]
  total: number
}>

请求参数

参数名	说明	类型
page	当前页码	`number` / `null`
pageSize	每页条数	`number` / `null`
signal	用于取消请求的信号	`AbortSignal`

signal 由组件自动提供。请求函数不需要取消能力时，可以不解构这个参数。

返回值

字段名	说明	类型
data	表数据	`Row[]`
total	数据总条数	`number`

TableProPagination

属性名	说明	类型	默认值
page	当前页码	`number`	1
pageSize	每页条数	`number`	20
pageSizes	每页条数选项	`number[]`	[10, 20, 50, 100]
pagerCount	页码按钮数量	`number`	5
layout	分页布局	`string`	total, sizes, prev, pager, next, jumper
background	是否为页码添加背景色	`boolean`	true

更多分页配置请参考 Element Plus Pagination。

Events

事件名	说明	类型
loaded	请求成功时触发的事件	`Function`
error	请求失败时触发的事件	`Function`

更多事件请参考 Element Plus Table 事件。

Table Exposes

方法名	说明	类型
reload	重新执行请求；不传参数时刷新当前页	`Function`
search	应用当前筛选条件并回到第一页	`Function`
resetFilter	重置筛选条件并重新请求	`Function`

更多方法请参考 Element Plus Table Exposes。

Table 表格 ​

基础用法 ​

请求数据源 ​

高级筛选 ​

自定义筛选字段 ​

自定义列 ​

自定义单元格 ​

渲染函数 ​

自定义表头 ​

表头渲染函数 ​

分组表头 ​

表格功能 ​

列配置 autoMerge（建议开启全边框） ​

mergeFields 多级合并（建议开启全边框） ​

未开启 border 的合并（Element Plus 默认无边框） ​

API ​

Props ​

TableProFilterConfig ​

TableProColumn ​

TableProRequest ​

请求参数 ​

返回值 ​

TableProPagination ​

Events ​

Table Exposes ​