WetProTable 高级查询表格

基本介绍

WetProTable 是根据 JSON Schema 来生成查询表格的组件。其实就是WetSchemaTable和WetProForm、ElPagination的组合，并添加了业务常见的场景

引入方法: import { WetProTable } from '@wetspace/pro-components';

基本使用

WetProTable 会根据列来生成一个 Form，用于筛选列表数据，最后的值会根据通过 request 的第一个参数返回。

按照规范，table 的表单不需要任何的必选参数，所有点击搜索和重置都会触发 request 来发起一次查询

Form 的列是根据 valueType 来生成不同的类型，详细的值类型请查看WetSchemaForm配置

表格单元格枚举渲染

枚举配置是依赖于表格配置项属性valueEnum，可以设置状态，一共内置了'danger' | 'warning'| 'primary'|'success' | 'info' 这样五个状态，具体使用如下

行选择

表格充满整个容器

设置fill属性即可

表格工具栏

默认是无ToolBar的查询表格，如果要有TooBar，可以使用插槽，对toolbar进行填充，也可以设置showMoreTools 或者title 属性显示默认的toolbar操作来显示工具栏

嵌套表格

Columns 列定义

ts 描述

import type { aaTableColumnCtx } from 'element-plus'
export type WetBaseColumns = {
    title?: string,
    label?: string,
    isScrollMark?: boolean,
    dataIndex: string | string[]
    tooltip?: string,
    ellipsis?: boolean | Partial<ElTooltipProps>,
    valueEnum?: WetFormOption[],
    isRender?: boolean,
    render?: (rowInfo: { row: any, $index: number }) => Component | VNode | undefined,
    columns?: WetBaseColumns[]
} & Partial<Omit<TableColumnCtx<any>,'columns'>>

export type WetProTableColumns = Omit<WetBaseColumns, 'columns'> & {
    required?: boolean,
    columns?: WetProTableColumns[]
    valueType?: WetValueType,
    formItemProps?: WetSchemaItemType,
    fieldProps?: Record<string, any>
    search?: boolean,
    hideInSearch?: boolean,
    hideInTable?: boolean,
}

valueType 值类型

WetProTable 封装了一些常用的值类型来减少重复的 render 操作，配置一个 valueType 即可展示格式化响应的数据

属性

基本属性继承element-plus的ElTable组件

属性	描述	类型	默许值
columns	表格列名称，对label做兼容	WetSchemaItemType[]	-
emptyFormat	单元格空值处理	string	-
rowKey	指定行唯一标记	string | string[]	-
expandable	可行展开配置	PropType<WetTableExpandable>	-
ellipsisProps	行数据超出省略提示配置	Partial<ElTooltipProps>	{effect: 'light',placement: 'top'}
selections/v-model:selections	Schema配置	行选择数据绑定	-
rowSelection	行选择配置	WetRowSelection	-
mergeDataIndexs	数据合并索引	string | string[]	-
title	表格标题	WetProTableRequest	-
request	数据请求	数据请求	-
search	查询表格配置	Partial<Omit<WetSchemaProps, 'labelWidth'>&{ollapsed?: boolean,labelWidth?: number,collapseShowNum?:number}|boolean	-
pagination	表格标题	PropType<Partial<PaginationProps>&{ position?: 'left' | 'right' | 'center'}|boolean	-
showMoreTools	更多工具栏	boolean	true
cardBordered	是否为卡片表格样式	boolean	-
fill	是否充满容器	boolean	-