Skip to content

高级用法

首先(必看)

  1. 在大部分情况下我们需要使用请求后的数据,而不是静态数据,TablePage能让你更好的查询数据,极大的减少你的代码量,提升你的开发效率,让你拥有丝滑的开发体验。
  2. 以下两个方法需要重写
    • 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表格左上角的titleenmu
rowIndex表格序号RewriteTableColumnCtx
errData表格中无数据时显示的数据String-
......更多配置,请参考

TableColumns 属性

属性名说明类型默认值
maxOperations表格最大显示的操作按钮数,超出这个数显示更多,设置operations有效Number3
operations表格操作按钮列表,详情请参阅下表Object
children表格头下的数据配置项,多级表头Array
......更多配置,请参考

Operations 属性

属性名说明类型默认值
message名称String
click点击事件Function
show是否显示enmu
sort操作的排序,数值越小列越靠前Number
......更多配置,请参考

事件

事件名说明类型
size-changepage-size 改变时触发Function
current-changecurrent-page 改变时触发Function
checked-change点击隐藏显示操作栏时触发Function

Title 属性

属性名说明类型默认值
message名称String
show是否显示Boolean
......更多配置,请参考