WetSchemaTable 配置式表格

基本介绍

WetSchemaTable 是根据 JSON Schema 来生成表格的工具。其实就是把原本ElTableColumn的属性均放入了WetSchemaTable的columns进行配置，简化了部分使用

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

基本使用

当 WetSchemaTable 元素中注入 data 对象数组后，配置属性 columns,在columns的对象成员中用 dataIndex 属性来对应对象中的键名(列数据在数据项中对应的路径，支持通过数组查询嵌套路径)即可填入数据，用:

• label/title 属性来定义表格的列名。
• width 属性来定义列宽
• ellipsis属性来定义超过宽度将自动省略
• isRender,用于标记该列使用插槽渲染，渲染名为dataIndex（为数组的话，就是数组成员连起来的字符串组成的名称）
• render,列渲染函数，使用Vnode或者Components渲染列，优先级比isRender高

更多columns配置细则请查看columns描述

多级表头

合并单元格

大部分业务场景下都是单元格合并纵向同值合并,为此针对此业务场景做了合并简化操作,只需要配置mergeDataIndexs,指明哪些列,值相同便合并单元格,使用如下:

树形数据

Columns 定义描述

import columnpProps  from 'element-plus/es/components/table/src/table-column/defaults'
export type CloumnPropsType = ExtractPropTypes<typeof columnpProps>

export type WetBaseColumns = {
    title?: string,
    label?: string,
    dataIndex: string | string[]
    tooltip?: string,
    ellipsis?: boolean | Partial<ElTooltipProps>,
    valueEnum?: WetFormOption[],
    isRender?: boolean,
    render?:(row:any,index:number)=>Component|VNode,
    columns?:WetBaseColumns[]
}& Partial<CloumnPropsType>

属性

通用属性继承ElTable，具体参考官方文档

属性	描述	类型	默许值
emptyFormat	空值输出	string	-
fill	表格是否自动填充容器并适应容器大小	boolean	-
columns	列配置	WetBaseColumns[]	-
showIndex	是否显示序号	boolean	false
selections\v-model:selections	选择表格项的双向绑定值	any[]	[]
rowSelection	配置表格选择	WetRowSelection	false
ellipsisProps	列省略的配置项，继承ElTooltip	Partial<ElTooltipProps>	-
expandable	是否可以展开行	WetProTableExpandable	false
mergeDataIndexs	配置纵向相同值单元格合并	(string| string[])	-

实例方法（Exposes）

方法名	描述	类型	参数说明
scrollToIndex	滚动特定的行，并高亮	(index: number) => void	-

类型参考

export type WetBaseColumns = {
    title?: string,
    label?: string,
    dataIndex: string | string[]
    tooltip?: string,
    ellipsis?: boolean | Partial<ElTooltipProps>,
    valueEnum?: WetFormOption[],
    isRender?: boolean,
    render?:(row:any,index:number)=>Component|VNode,
    columns?:WetBaseColumns[]
}& Partial<CloumnPropsType>

export type WetTableExpandable = {
    columns: WetBaseColumns[],
    dataIndex?: string | string[],
    dataOutput?: (row:any,index:number) => any,
    showIndex?:boolean,
    expandable?:WetTableExpandable,
    size?:WetSchemaTableProps['size'],
    stripe?:WetSchemaTableProps['stripe'],
} | boolean

export type WetRowSelection = {
    type: 'checkbox' | 'radio' | 'line',
    fixed?: boolean,
    onChange?: (selectedRows: any[]) => void
}