Open zybzzc opened 1 week ago
因为 page 没有 breadcrumb,所以我想自己实现,但是我发现无论是在 schema 里实现,还是自己在 renderAmis 外层实现,都会出现标题问题
在 page -> crud(autoFillHeight=true) 外层添加 wrapper 包裹后,table的高度(.cxd-Table-content的 inline style height)在不停的缩小, 没加 wrapper 前是正常的。
自己在外层实现:
import { Breadcrumb } from '@arco-design/web-react'; const BreadcrumbItem = Breadcrumb.Item; <div> <div className='mb-3'> <Breadcrumb> <BreadcrumbItem>Home</BreadcrumbItem> <BreadcrumbItem href='#'> Channel </BreadcrumbItem> <BreadcrumbItem>News</BreadcrumbItem> </Breadcrumb> </div> <Amis schema={schema} /> </div>
schema 实现:
{ "type": "wrapper", "body": [ { "type": "breadcrumb", "items": [ { "label": "设置" }, { "label": "管理员" } ], "style": { "margin-bottom": "16px" } }, { "type": "page", "title": "表格内容区域自适应屏幕高度,内容超出时在内容区出现滚动条", "remark": "bla bla bla", "toolbar": [ { "type": "button", "actionType": "dialog", "label": "新增", "icon": "fa fa-plus pull-left", "primary": true, "dialog": { "title": "新增", "body": { "type": "form", "name": "sample-edit-form", "api": "post:https://aisuda.bce.baidu.com/amis/api/sample", "body": [ { "type": "input-text", "name": "engine", "label": "Engine", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "browser", "label": "Browser", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "platform", "label": "Platform(s)", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "version", "label": "Engine version" }, { "type": "divider" }, { "type": "input-text", "name": "grade", "label": "CSS grade" } ] } } } ], "body": { "type": "crud", "draggable": true, "api": "https://aisuda.bce.baidu.com/amis/api/sample", "perPage": 50, "keepItemSelectionOnPageChange": true, "maxKeepItemSelectionLength": 11, "autoFillHeight": true, "labelTpl": "${id} ${engine}", "autoGenerateFilter": true, "bulkActions": [ { "label": "批量删除", "actionType": "ajax", "api": "delete:https://aisuda.bce.baidu.com/amis/api/sample/${ids|raw}", "confirmText": "确定要批量删除?" }, { "label": "批量修改", "actionType": "dialog", "dialog": { "title": "批量编辑", "name": "sample-bulk-edit", "body": { "type": "form", "api": "/amis/api/sample/bulkUpdate2", "body": [ { "type": "hidden", "name": "ids" }, { "type": "input-text", "name": "engine", "label": "Engine" } ] } } } ], "quickSaveApi": "https://aisuda.bce.baidu.com/amis/api/sample/bulkUpdate", "quickSaveItemApi": "https://aisuda.bce.baidu.com/amis/api/sample/$id", "filterTogglable": true, "headerToolbar": [ "bulkActions", { "type": "tpl", "tpl": "定制内容示例:当前有 ${count} 条数据。", "className": "v-middle" }, { "type": "link", "href": "https://www.baidu.com", "body": "百度一下", "htmlTarget": "_parent", "className": "v-middle" }, { "type": "columns-toggler", "align": "right" }, { "type": "drag-toggler", "align": "right" }, { "type": "pagination", "align": "right" } ], "footerToolbar": ["statistics", "switch-per-page", "pagination"], "columns": [ { "name": "id", "label": "ID", "searchable": { "type": "input-text", "name": "id", "label": "主键", "placeholder": "输入id" }, "fixed": "left" }, { "name": "engine", "label": "Rendering engine", "fixed": "left" }, { "name": "browser", "label": "Browser", "searchable": { "type": "select", "name": "browser", "label": "浏览器", "placeholder": "选择浏览器", "options": [ { "label": "Internet Explorer ", "value": "ie" }, { "label": "AOL browser", "value": "aol" }, { "label": "Firefox", "value": "firefox" } ] } }, { "name": "platform", "label": "Platform(s)" }, { "name": "version", "label": "Engine version", "searchable": { "type": "input-number", "name": "version", "label": "版本号", "placeholder": "输入版本号", "mode": "horizontal" } }, { "name": "grade", "label": "CSS grade" }, { "type": "operation", "label": "操作", "width": 100, "buttons": [ { "type": "button", "icon": "fa fa-eye", "actionType": "dialog", "tooltip": "查看", "dialog": { "title": "查看", "body": { "type": "form", "body": [ { "type": "static", "name": "engine", "label": "Engine" }, { "type": "divider" }, { "type": "static", "name": "browser", "label": "Browser" }, { "type": "divider" }, { "type": "static", "name": "platform", "label": "Platform(s)" }, { "type": "divider" }, { "type": "static", "name": "version", "label": "Engine version" }, { "type": "divider" }, { "type": "static", "name": "grade", "label": "CSS grade" }, { "type": "divider" }, { "type": "html", "html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换(todo).</p>" } ] } } }, { "type": "button", "icon": "fa fa-pencil", "tooltip": "编辑", "actionType": "drawer", "drawer": { "position": "left", "size": "lg", "title": "编辑", "body": { "type": "form", "name": "sample-edit-form", "api": "https://aisuda.bce.baidu.com/amis/api/sample/$id", "body": [ { "type": "input-text", "name": "engine", "label": "Engine", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "browser", "label": "Browser", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "platform", "label": "Platform(s)", "required": true }, { "type": "divider" }, { "type": "input-text", "name": "version", "label": "Engine version" }, { "type": "divider" }, { "type": "select", "name": "grade", "label": "CSS grade", "options": ["A", "B", "C", "D", "X"] } ] } } }, { "type": "button", "icon": "fa fa-times text-danger", "actionType": "ajax", "tooltip": "删除", "confirmText": "您确认要删除?", "api": "delete:https://aisuda.bce.baidu.com/amis/api/sample/$id" } ], "toggled": true } ] } } ] }
👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
因为 page 没有 breadcrumb,所以我想自己实现,但是我发现无论是在 schema 里实现,还是自己在 renderAmis 外层实现,都会出现标题问题
在 page -> crud(autoFillHeight=true) 外层添加 wrapper 包裹后,table的高度(.cxd-Table-content的 inline style height)在不停的缩小, 没加 wrapper 前是正常的。
自己在外层实现:
schema 实现: