表格
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时，可以使用 表格。当数据量大时，前端会自动进行分页，当然，也可以设置 虚拟滚动，不过虚拟滚动对 customRender 支持不是很友好。
Props API
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoFetch | 没有form表单查询条件 可设置此参数在table中直接调用查询 | boolean | false | |
| clickToSelectRow | 单击一行任意位置都可以选中行 | boolean | false | |
| tableSetting | 表格设置 | boolean | TableSetting | ||
| striped | 是否显示斑马条纹 | boolean | true | |
| clearSelectOnPageChange | 分页数据改变是否清空选中的数据 | boolean | true | |
| width | 是否支持拖拽改变列宽 | number | string | ||
| resizable | 是否支持弹窗拖拽 | boolean | true | |
| minWidth | 最小拖拽宽度 | number | ||
| maxWidth | 最大拖拽宽度 | number | ||
| virtual | 是否需要虚拟滚动, 此时容器必须设置高度 | |||
| defSort | 默认的排序 | Recordable | ||
| filterFn | 过滤 | (data: Recordable<string[]>) => any | ||
| rowKey | 物理主键 | string | number | 'id' | |
| columnCode | 列code编码, 通过视图配置的页面支持此功能(公司暂时后台不支持) | string | ||
| slotsTemplate | 列自定义的模板, 通过视图配置的模板 | Recordable | ||
| columns | 列控制 | BasicColumn[] | ||
| showIndexColumn | 是否显示序号列 | boolean | false | |
| expandActions | 是否展开按钮组 只针对ACTION | boolean | false | |
| ellipsis | 超出部分是否已省略号显示 | boolean | true | |
| dataSource | 需要渲染的数据 | Recordable[] | ||
| canResize | table高度是否撑开页面, 如果设置成false，需要设置scroll属性 | true | ||
| pagination | 分页数据 | boolean | PaginationProps | ||
| loading | 是否处于加载中 | boolean | ||
| rowClassName | 动态定义行class, 多个class用空格分开 | (row: any, index: number) => string | ||
| scroll | 定义何时出现滚动条 | { x?: number | true; y?: number } | ||
| onTableChange | 分页、排序、筛选变化时触发 | Function | ||
| onDownload | 下载 | (excelData: DownloadType) => ({}) | ||
| rowSelection | 列表项是否可选择, 参照配置 | |||
| customRow | 设置行属性, 参照配置 | |||
| childrenColumnName | 指定树形结构的列名 | string | 'children' | |
| isTreeTable | 是否为树形table | boolean | false | |
| checkStrictly | 树形结构 是否使用粘性选择 | boolean | false | |
| operations | 操作栏 | TableRowAction | ButtonType[] | ||
| toolbar | 工具栏按钮 | ButtonType[] | ||
| onSearch | 查询执行的函数 | (params: Recordable) => void | ||
| onOPenAddDialog | 新增 | (params: Recordable) => void | ||
| onOpenUpdateDialog | 编辑 | (row: Recordable, index: number) => void | ||
| onDelete | 删除 | (row: Recordable, index: number) => void | ||
| onDeletes | 批量删除 | (params: Recordable) => void |
BasicColumn
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| t | 国际化备注 | string | ||
| children | 子元素 | BasicColumn[] | ||
| defaultHidden | 默认是否显示 | boolean | ||
| show | 业务控制是否显示 | boolean | (column: Recordable) => boolean | ||
| flag | 特殊列标识 | 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION' | ||
| render | 过滤器转换 | CellFormat | ||
| slot | 使用插槽(这里配置插槽名, 在节点中写入插槽) | string | ||
| edit | 是否采用编辑组件 | boolean | ||
| editable | 是否可以编辑 | boolean | ||
| editComponent | 支持编辑的控件类型 | 'Input' | 'InputNumber' | 'Select' | 'TreeSelect' | 'Checkbox' | 'Switch' | 'DatePicker' | 'TimePicker' | ||
| editComponentProps | 控件属性配置 | (opt: { text: string | number | boolean | Recordable; record: Recordable; column: BasicColumn; index: number; }) => Recordable | Recordable | ||
| editRule | 校验规则 | boolean | ((text: string, record: Recordable) => Promise<string>) | ||
| align | 设置列的对齐方式 | left | right | center | 'left' | |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number |
CellFormat
TableRowAction
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 操作栏标题 | string | '操作' | |
| width | 操作栏宽度 | number | string | ||
| expand | 图标是否展开, 也可以用table中的 <code>expandMethodIcon<code> | boolean | ||
| expandNum | 默认展开操作按钮的数量 | number | ||
| fixed | 操作栏固定位置 | 'left' | 'right' | 'auto' | ||
| btns | 按钮设置 | ButtonType[] |
TableSetting
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| download | 表格下载 | boolean | ('current' | 'select' | 'all')[] | ||
| setting | 是否显示列控制 | boolean | true | |
| fullscreen | 是否显示全屏按钮 | boolean |