高级用法

首先（必看）

1. 在大部分情况下我们需要使用请求后的数据，而不是静态数据，TablePage能让你更好的查询数据，极大的减少你的代码量，提升你的开发效率，让你拥有丝滑的开发体验。
2. 以下两个方法需要重写
   • ajaxTableData是获取你请求数据的参数
   • changeTableData改变自已的data数据还有分页的参数

import {TablePage, DinertTablePageProps, AjaxTableProps} from '@dinert/element-plus'
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: DinertTablePageProps<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.table.value.data = res.data
        this.table.value.pagination.total = res.total
    }
}

export default RewriteTablePage

配合TablePage使用

• 当你调用tablePage.search这个方法后，一个表格查询页面就完成了，无需在分页时自已编写额外的逻辑

属性

属性名	说明	类型	默认值
header	是否显示头部的操作栏	enmu	一
footer	是否显示底部分页栏	Boolean	true
tableSlot	表格的插槽为true时，表格中所有的插槽名称都为default，为false时可以正常使用插槽	Boolean	false
table	详细请参阅下面table属性	Object	一

Table 属性

属性名	说明	类型	默认值
tableColumns	表格头的数据配置项	Array	一
errData	表格中无数据时显示的数据	String	-
setting	是否显示表格右上的操作栏	Boolean	true
class	表格的类名	String	一
pagination	详细请参阅element-plus的pagination	Object	object
......	更多配置，请参考

TableColumns 属性

属性名	说明	类型	默认值
show	当前列是否显示	enmu	一
checked	当前列是否是选中状态和右上角的操作栏有联动效果，选中时显示，反之不显示	Boolean	true
setting	操作栏是否显示在当前列，当值为true时表格右上的操作栏会消失	Boolean	一
maxOperations	表格最大显示的操作按钮数，超出这个数显示更多，设置operations有效	Number	3
operations	表格操作按钮列表，详情请参阅下表	Object	一
sort	列的排序，数值越小列越靠前	Number	一
children	表格头下的数据配置项，多级表头	Array	一
......	更多配置，请参考	一	一

Operations 属性

属性名	说明	类型	默认值
message	名称	String	一
click	点击事件	Function	一
show	是否显示	enmu
sort	操作的排序，数值越小列越靠前 前	Number	一
second	二次确认框，点确定后才会调用click方法，当operations的key为delete时默认开启，当值为messageBox时是弹窗的确认状态，在操作为更多时下的按钮都为弹窗确认状态	enmu	一
messageBox	当second为messageBox时生效，messageBox的配置项	Object	一
......	更多配置，请参考	一	一

事件

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

插槽

插槽名	说明
column_[prop]	column_是固定的，prop里面的值取决于tableColumns中的prop，自定义表格中的内容
column_header_[prop]	column_header_是固定的，prop里面的值取决于tableColumns中的prop，自定义表格头部的内容
header_left_[key]	column_header_是固定的，prop里面的值取决于header中的key，自定义表格头部操作栏的左侧
header-footer	自定义表格头部操作栏的底部
header-title	自定义表格头部操作栏的头部
table-empty	自定义表格空的内容
table-append	插入至表格最后一行之后的内容

Header 属性

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