amis Portlet 门户栏目怎么配置 tabs、工具栏与头部展示-平芜编程栈

amis Portlet 门户栏目怎么配置 tabs、工具栏与头部展示

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis

在 amis 中搭建门户页或仪表盘时，常见需求是把多个内容块放进同一个卡片：卡片带 tab 页头，页头右侧有一段描述信息，页头附近放几个操作按钮，并且按钮要跟着 tab 切换或始终固定。amis 的 Portlet（门户栏目）组件就是为这个场景设计的，通过"type": "portlet"的 JSON 配置即可完成，无需写 React 代码。本文按 Portlet 组件文档中的示例，讲清 tabs、工具栏和头部展示三类配置的写法与适用条件。

配置 tabs：内容块怎么组织

最简的 Portlet 由tabs数组驱动，每个 tab 用title指定页头名称，用tab指定内容区。内容区的类型是 SchemaNode，即纯模板字符串、组件 Schema 或 Schema 数组都可以。description是支持模板的字符串，显示在标题右侧，可以引用外层数据：

{ "type": "page", "data": { "text": "这是一段描述信息" }, "body": { "type": "portlet", "description": "${text}", "tabs": [ { "title": "标题", "tab": "Content 1" }, { "title": "标题2", "tab": "Content 2" } } ] }

两个文档明确给出的展示细节，配置前需要知道：

默认 tabs 只有一项的时候没有选中状态，即只有一个 tab 时页头不显示高亮；
给每个 tab 配置icon可以设置图标，可以是 fontawesome 或 URL 地址，例如"icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg"。

用 source 动态生成 tabs

tab 数量固定时直接写数组即可；需要根据数据动态生成时，配置source属性关联数据。Portlet 文档指出具体用法参考 Tabs 选项卡组件，Tabs 文档给出的 source 写法如下（示例结果，其中${arr}指向数据中的数组）：

{ "type": "page", "data": { "arr": [ {"a": "收入", "b": 199}, {"a": "支出", "b": 299} ] }, "body": [ { "type": "tabs", "source": "${arr}", "tabs": [ { "title": "${a}", "body": { "type": "tpl", "tpl": "金额：${b|number}元" } } ] } ] }

把这段里的tabs换成portlet即可，source指向的数据项会重复生成选项卡，title中可以用${字段名}取值。

内容较多时的懒加载与销毁（可选）

如果每个 tab 内容较重，文档给出两个开关：

mountOnEnter：只有在点击 tab 的时候才渲染，内容较多时可以提升性能，但第一次点击的时候会有卡顿；
unmountOnExit：配置"unmountOnExit": true后，切换 tab 时自动销毁隐藏的 tab。

另外单个 tab 上可以配置reload，设置以后内容每次都会重新渲染，对 CRUD 的重新拉取很有用；tabs[x].className用于调整 Tab 区域样式，默认值是"bg-white b-l b-r b-b wrapper-md"。

配置工具栏：固定按钮与随 tab 切换的按钮

Portlet 有两个层级的toolbar，文档属性表中的区分很明确：

顶层toolbar：tabs 中的工具栏，不随 tab 切换而变化；
tabs[x].toolbar：随 tab 切换而变化，每个 tab 各自带一组按钮。

按钮本身是普通按钮 Schema，actionType可以是ajax、dialog、url等；文档还展示了dropdown-button聚合多个按钮的写法。按文档示例完整配置如下：

{ "type": "portlet", "toolbar": [ { "label": "固定操作", "type": "button", "actionType": "ajax", "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm" } ], "tabs": [ { "title": "Tab 1", "tab": "Content 1", "toolbar": [ { "label": "ajax请求", "type": "button", "actionType": "ajax", "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm" }, { "type": "dropdown-button", "level": "link", "icon": "fa fa-ellipsis-h", "hideCaret": true, "buttons": [ { "type": "button", "label": "编辑", "actionType": "dialog", "dialog": {"title": "编辑", "body": "你正在编辑该卡片"} }, { "type": "button", "label": "删除", "actionType": "dialog", "dialog": {"title": "提示", "body": "你删掉了该卡片"} } ] } ] }, { "title": "Tab 2", "tab": "Content 2", "toolbar": [ { "type": "button", "level": "link", "url": "https://www.baidu.com", "actionType": "url", "size": "sm", "label": "跳转2" } ] } ] }

示例中的api与url是文档自带的 mock 演示地址，实际使用时替换为自己的接口地址。从实现代码 Portlet.tsx 可以看到，工具栏按钮渲染时会合并默认的level: 'link'与size: 'sm'，因此文档示例中的跳转按钮显式写level、size只是覆盖默认值，不是必填项。

控制头部展示：描述、隐藏、分隔线

头部相关的属性在文档属性表中集中列出，各自用途如下：

属性	类型	说明
`description`	模板	标题右侧信息，支持`${变量}`模板
`hideHeader`	`boolean`	隐藏头部，默认`false`
`divider`	`boolean`	去掉分隔线
`style`	`string`或`Object`	自定义样式
`scrollable`	`boolean`	是否导航支持内容溢出滚动，`vertical`和`chrome`模式下不支持该属性；`chrome`模式默认压缩标签

隐藏头部时文档给出的完整示例：

{ "type": "portlet", "hideHeader": true, "tabs": [ { "title": "Tab 1", "tab": "Content 1" } ] }

注意文档对hideHeader的行为说明：去掉头部后，默认只展示内容 tab 第一项的内容，适合把 Portlet 退化成纯内容卡片的场景。

去掉头部与内容之间的分隔线，把divider设为false；用style做样式微调，文档示例是改边框颜色：

{ "type": "portlet", "style": { "borderColor": '#333' }, "tabs": [ { "title": "Tab 1", "tab": "Content 1" } ] }

默认选中的 tab 与切换事件

配置activeKey可以指定默认选中的选项卡，文档示例使用索引值（1表示第二个 tab）；配置onSelect可以监听切换事件，回调会传递key参数和 props，示例中用alert(key)演示：

{ "type": "portlet", "activeKey": 1, "onSelect": "alert(key)", "tabs": [ { "title": "Tab 1", "tab": "Content 1" }, { "title": "Tab 2", "tab": "Content 2" } ] }

效果验证

上述每段配置都可以直接放进 Portlet 组件文档对应章节的示例区查看渲染效果，这是文档给出的验证方式。要放到自己的项目里，Portlet 就是普通 Schema，跟随快速开始中 SDK 或 React 的任一接入方式渲染即可，判断标准是：页头显示配置的 tab 标题、description内容出现在标题右侧、工具栏按钮可点击并按actionType触发对应动作。

几个文档明确的限制，出现不符合预期时先核对：