Open
Description
因为 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
}
]
}
}
]
}