# 页面组件：页头

来源快照：`result_data_new_260518.json`

- 来源 ID：`1967894414475132058`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 1\. 场景说明

  


通常当我们预览门户首页或者模块看板的时候，会想通过点击功能按钮快捷跳转数据表单或者流程发起界面，如在采购需求看板中通过点击按钮快捷进入采购需求/采购计划/采购合同表单页面或者新建页面。

效果如下图展示：![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709925052391429&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#   


# 2\. 功能简介

  


上述场景通常使用导航面板控件实现，本次将介绍另一个可以实现该场景的控件：页头控件，通过为页头配置按钮与相关事件实现点击按钮打开指定的页面。

#   


# 3\. 操作说明

  


1.从组件栏中选择拖入一个页头控件。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709925223727130&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2.添加2个按钮，为按钮添加文字采购需求、采购计划并配置相应的图标。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709925180899389&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3.点击添加按钮事件配置，动作：打开页面，链接地址：采购需求/采购计划表格，打开方式：新窗口。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709929333260294&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709929515130906&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


4.新添加一个新建合同按钮，并将按钮拖动至分割线下方，配置事件动作打开采购合同的新建布局。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709933821165574&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709933662666773&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


5.保存预览配置效果，点击页头控件右上角的更多键，可以查看拖动至分割线下方的新建合同按钮。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709933810098198&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


6.进行按钮的样式设置。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709950968365074&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


7.根据用户使用情况还可以对按钮进行暂时隐藏，隐藏的按钮将不再进行展示，如隐藏采购计划与新建合同。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709955178561546&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709955178561554&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

当需要显示隐藏的按钮时，在设置隐藏的位置选择显示即可。![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709959566688274&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
