高级用法
首先(必看)
- 在大部分情况下我们需要使用请求后的数据,而不是静态数据,TablePage能让你更好的查询数据,极大的减少你的代码量,提升你的开发效率,让你拥有丝滑的开发体验。
- 以下两个方法需要重写
- ajaxTableData是获取你请求数据的参数
- changeTableData改变自已的data数据还有分页的参数
ts
import {TablePage, TablePageProps, AjaxTableProps} from '@dinert/ant-design'
import axios from 'axios'
interface DataProps {
date: string;
name: string;
address: string;
}
interface TableParams<T = any> {
data: T[];
page?: number;
pageNum?: number;
pageSize?: number;
total?: number;
totalPages?: number;
}
/* TablePage的类型参数说明
* T 表格data数据格式
* D 表单model的数据格式
* FI 表单formItem的数据格式
* P 发起请求的数据格式
* R 请求回来的数据格式
*/
class RewriteTablePage<T, D, FI> extends TablePage<T, D, FI, Parameters<typeof axios.request>[0], TableParams<T>> {
constructor(options: TablePageProps<T, D, FI>) {
super(options)
this.options = options
}
// 注意,这里一定要返回promise
ajaxTableData(options: AjaxTableProps): Promise<TableParams<T>> {
return axios.request(this.getAjaxTableDataParams(options))
}
changeTableData(res: TableParams<T>) {
this.updateTable(draft => {
draft.dataSource = res.data
draft.pagination.total = res.total
})
}
}
export default RewriteTablePage
配合TablePage使用
- 当你调用tablePage.search这个方法后,一个表格查询页面就完成了,无需在分页时自已编写额外的逻辑
Table 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
tableColumns | 表格头的数据配置项 | Array | 一 |
class | 表格的类名 | String | 一 |
title | 表格左上角的title | enmu | 一 |
rowIndex | 表格序号 | RewriteTableColumnCtx | 一 |
errData | 表格中无数据时显示的数据 | String | - |
...... | 更多配置,请参考 | 一 | 一 |
TableColumns 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
maxOperations | 表格最大显示的操作按钮数,超出这个数显示更多,设置operations有效 | Number | 3 |
operations | 表格操作按钮列表,详情请参阅下表 | Object | 一 |
children | 表格头下的数据配置项,多级表头 | Array | 一 |
...... | 更多配置,请参考 | 一 | 一 |
Operations 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 名称 | String | 一 |
click | 点击事件 | Function | 一 |
show | 是否显示 | enmu | |
sort | 操作的排序,数值越小列越靠前 | Number | 一 |
...... | 更多配置,请参考 | 一 | 一 |
事件
事件名 | 说明 | 类型 |
---|---|---|
size-change | page-size 改变时触发 | Function |
current-change | current-page 改变时触发 | Function |
checked-change | 点击隐藏显示操作栏时触发 | Function |
Title 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 名称 | String | 一 |
show | 是否显示 | Boolean | |
...... | 更多配置,请参考 | 一 | 一 |