table高级表格
2023-02-01 09:24:18 0 举报AI智能生成
table高级表格，内部结构表
作者其他创作
大纲/内容
组件必需属性
（模板id，由后端给到写死前端）： TemplateId
（项目Id）：nodeId
（项目类型）：nodeType
组件可选属性
（开启表格多选，内部自带方法）：isRowSelection
（表格配置属性，可覆盖默认属性）：tableConfig
（新增、修改的form配置属性，可覆盖默认属性）：formConfig
（Table表格Ref）：refTable
（新增、修改的form Ref）：refForm
（监听Form表单值变化方法）：FormChange
（（row：行数据，updateDate：回调更新table方法）=》 React.ReactNode）：otherTableAction
（外部自定义formItem组件）：otherFormItems
（替换掉table的数据渲染方法）：tableRender
detailLayout
详情布局
详情布局
show：是否显示数据详情
top：同Render自定义方法（输出React.ReactNode显示在详情上方）
buttom：同Render自定义方法（输出React.ReactNode显示在详情下方）
页面布局
table筛选项
模板传入
模板传入
筛选列表，使用form核心组件
按钮（搜索、重置）
table表格
top按钮
根据模板返回权限控制
根据模板返回权限控制
新增
展示布局
模板传入
模板传入
leftSide（左侧竖版弹出框）
rightSide（右侧竖版弹出框）
full（全屏分模块展示）
form核心组件
删除（需开启table多选功能）
table主表格
colums
模板传入，需前端二次解析
模板传入，需前端二次解析
title：名称
dataIndex：后端字段定义
width？：宽度
children？：同父级（自动开启树状多表头）
align？：对齐方式（默认左对齐）
ellipsis？：true（超出省略）
filters？：表格内部下拉筛选项（格式[{ text: 'Joe', value: 'Joe' }]）
sorter？: true（开启排序筛选）
colums-action
操作项按钮（由接口数据权限字段控制权限）
操作项按钮（由接口数据权限字段控制权限）
查看
布局（组件暴露参数）
show：是否显示数据详情
top：同Render自定义方法（输出React.ReactNode显示在详情上方）
buttom：同Render自定义方法（输出React.ReactNode显示在详情下方）
详情（同新增布局）
修改：同top新增
删除
外部传入otherTableAction合并
colums-render
table数据渲染（根据模板type区分）
table数据渲染（根据模板type区分）
默认显示字段数据
时间戳（转换字符串）
文件预览（自带预览文件组件）
是否替换原render方法（外部传入tableRender）
table分页
已选项显示数字（开启多选自动显示）
分页Page组件
form核心组件
form组件属性
layout（布局）
Horizontal（文字，框横向排布）
Vertical（文字，框纵向排布）
Inline（自适应排布，适用于搜索列表）
form（类ref）控制
onFinish（执行提交的事件）
children（内部formList列表）
formItem子组件列表
属性
type（类型）
select（需要添加字典规则，动态数据）
data（添加开始时间、结束时间约定）
field（后端字段定义）
rules（校验规则）
require（是否必填由模板传入）
默认校验（例：手机号校验，邮箱校验等由组件内置）
模板传入校验（前后端约定对象传入规则解析）
otherConfig（其他对应类型属性对象）
otherCostum（前端端约定属性规则）
内部默认自带组件（现有type类型）
外部传入自定义组件（同内部格式一致）
0 条评论
下一页
