ProTable
目前文档内容对标 ballcat v0.7.0 以上版本
在原生 antd Table 的初始上进行了一层封装,功能实现参考了 react 版 ProTable。
API
支持原生 Antd Table 的所有 prop,具体配置参看 Antd Vue 官方文档。
但是 ProTable 对以下默认值做了一些调整:
Antd Table 属性调整
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
size | 表格密度 | string | "middle" |
rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string | (record) => {string} |
pagination | 分页器,参考配置项 或 pagination文档,设为 false 时不展示和进行分页 | boolean | object |
// 默认分页器 pagination 属性
{
total: 0,
current: 1,
pageSize: 10,
showSizeChanger: true,
showTotal: (total, range) => {
let rangeBegin = range[0]
let rangeEnd = range[1]
if (enableI18n) {
return this.$t('pagination.pageInfo', { rangeBegin: rangeBegin, rangeEnd: rangeEnd, total: total })
} else {
return rangeBegin + '-' + rangeEnd + ' ' + '共' + total + '条'
}
}
}
Antd Column 额外属性
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
hideIntable | 是否在表格中隐藏 | boolean | - |
ProTable 额外属性
除此之外 ProTable 还额外提供了一些配置属性,如下表所示:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
request | 获取 dataSource 的方法 | (params) => responseData | - |
responseDataProcess | 再 request 获取到 responseData 后,将其处理为 pageInfo 的方法 | (responseData) => {records: string, total: number} | (data) => retrurn data |
onPageLoadSuccess | 分页数据加载成功时调用的钩子方法 | (dataSource) => void | () => |
lazyLoad | 是否延迟加载,默认表格初始化时即会调用 request | boolean | false |
defaultColumnState | 默认的 column 的显示状态, key 为 column 的 dataIndex 或 key 属性,value 为 boolean,表示默认是否展示在表格中。 | object | {} |
defaultSortField | 默认排序字段,为 null 时使用 rowKey,为 false 时不排序 | string | boolean |
defaultSortOrder | 默认排序字段的排序规则,升序 asc/降序 desc | string | "desc" |
searchFormClassName | 搜索表单区域的 className | string | - |
toolbarEnabled | 表格顶部的 toolbar 区域是否开启 | boolean | true |
toolbarTitle | 表格在 toolbar 区展示的标题的文本,当有 name 为 toolbar-title 的 slot 时,会使用该 slot,此配置不生效 | string | - |
toolbarOptions | toolbar option 配置 | `{ fullScreen: boolean | function, reload: boolean |
tableAlertRender | 自定义批量操作工具栏左侧信息区域的 scopedSlotName, false 时整个 alert 都不显示 | string | boolean |
tableAlertOptionRender | 自定义批量操作工具栏右侧选项区域的 scopedSlotName, false 时不显示 | string | boolean |
alwaysShowAlert | 总是显示 alert 信息(必须开启 rowSelection ) | boolean | false |
cardProps | 包裹表格的 tableCard 属性,属性列表参看 Antd Card 组件。当值 为 false 时,不在表格外包裹一层 card | boolean | object |
showPagination | 是否展示表格自带的分页器 | boolean | true |
onPaginationChange | 分页属性改变事件,主要用于自定义的分页器 | (localPagination) => void | () => |
表格列的隐藏
proTable 的 defaultColumnState
属性和 column 中扩展的 hiddenInTable
属性并不相同
hiddenInTable
是在表格和列设置中都隐藏,可用于权限控制。
defaultColumnState
,只是默认不显示,可以在列设置中恢复显示,用于表格列太多时的简化展示。
分页器属性介绍
将 ant table 自带的属性 pagination
设置为 false, 可以取消表格的分页器。
而 ProTable 的 showPagination
设置为 false 时,也会取消表格的分页器。
这两者的区别主要在于 pagination=false
主要用于不需要分页的表格,比如树形表格,可能会一次性加载全部数据,或懒加载处理。
而 showPagination=false
,需要配合自定义的 pagination
属性以及 onPaginationChange
事件,用于取消表格自带的分页器显示,使用自定义的分页器(可以参看 LovLocal 组件)
方法
ProTable 组件中定义了一些方法,用户在使用 ref 引用组件时,可以对这些方法进行直接调用
名称 | 描述 | 类型 |
---|---|---|
switchTableSize | 切换表格的 size | ({key: size}) => void |
switchTableFullScreen | 切换全屏状态 | () => void |
reloadTable | 表格重新加载方法, 在开启分页情况下,withFirstPage 为 true,则强制表格回到第一页 | (withFirstPage:boolean) => void |
loadData | 表格数据加载方法 | () => void |
toggleSearchCollapsed | 展开/关闭 搜索条件 | () => void |
resetSearchForm | 清空搜索条件 | () => void |
插槽
除了属性中自定义的tableAlertRender
, tableAlertOptionRender
等几个动态 name 的 slot 外,ProTable 还固定了一下几种 slot:
Slot
名称 | 描述 |
---|---|
toolbar-title | 表格工具列中标题区域 |
toolbar-action | 表格工具列中的操作区域 |
extend-box | 在搜索和表格之间的扩展区域 |
ScopedSlot
名称 | 描述 | scope |
---|---|---|
search-form | 搜索表单区域 | searchFormState |
SearchFormState
属性 | 描述 | 类型 |
---|---|---|
loading | 表格的加载状态,一般用于同步控制查询按钮的 loading | boolean |
reloadTable | 表格的刷新方法 | function |
queryParam | 搜索表单区域数据的双向绑定对象 | object |
collapsed | 搜索表单区域的的折叠情况 | boolean |
resetSearchForm | 清空 queryParam 的方法 | function |
toggleSearchCollapsed | 切换表单折叠的方法 | function |
常见问题
如何传递额外的查询条件
表格需要额外传参时,可以将 axios 方法包装一层,在调用前使用 Object.assign 进行参数合并
tableRequest: (requestParam) => {
return getPage(Object.assign({}, requestParam, { yourParam: 'test' }))
},
如何在外部调用表格方法或者属性
先使用 ref 持有 ProTable 的引用
<pro-table ref="table"></pro-table>
在利用 ref 调用组件提供的方法
this.$refs.table.reloadTable(withFirstPage)
获取表格的一些状态属性同理,比如一个按钮的 loading 状态需要和表格同步,可以通过表格的 localLoading 参数进行同步
<a-button :loading="$refs.table ? $refs.table.localLoading : false">
如何让操作按钮展示在左侧
默认操作按钮是居右显示的,如果不想显示表格 toolbar 的标题,想让操作区域在左侧,那么只需要将操作按钮放到 toolbar-title
的 slot 中即可。
<pro-table>
<!-- 操作按钮区域 -->
<template #toolbar-title>
<a-button type="primary" >新建</a-button>
</template>
</pro-table>