ElSimplePageHeader 页面头部

ElSimplePageHeader 组件用于提供一个带有【返回】按钮和页面标题或者选项卡（默认为申请信息和流程图两个选项卡）的详情页面头部（Header）的功能。

说明

组件的诞生背景是企业管理系统中各种需要走流程的功能的创建、编辑和详情页面。
这里所谓的流程是指在管理系统中一些功能的创建和编辑需要别人进行审批、复核、处理等操作，然后流转到下一个节点。
组件会用在后续的页面级组件（待开发）中。

组件提供了两种显示方式（以采购系统中供应商入库申请为例）：

返回按钮 + 页面标题：适用于无流程的预先通过后端导入的编辑与查看页面。
返回按钮 + 选项卡：适用于有流程的供应商申请、草稿编辑和详情页面。

基础用法

高级用法

默认情况下通过组件提供的插槽 extra 来添加表单的【保存】或【提交】以及其它按钮。针对无 #title、以选项卡展示的场景：右侧操作区为单一 ${uid}-actions（与 el-form-query / el-cru-page 一致）。在默认插槽参数中取到 uid 后，将 Portal 的 to 设为 ${uid}-actions，并用 order 控制与 #extra 经 Portal 注入的内容（默认 order 为 5）的先后。

说明

extra 插槽内容会通过 Portal 落到 ${uid}-actions（order 默认 5），与 PortalTarget 内其它内容统一排序。
不设 title、不使用 #title 时，页头右侧仅渲染单一 PortalTarget，name 为 ${uid}-actions。

自定义选项卡

组件提供了 tabConfig 属性来覆盖默认的选项卡配置；若仅需修改第一个选项卡的名称，可设置 firstTabLabel。

选项卡切换事件

组件提供 beforeChange 和 afterChange，可在切换时注入加载指示器：前者异步返回 true 继续执行，后者用于关闭加载。

页面回退（返回）说明

组件提供 back 事件处理返回逻辑，可根据需求集成 Vue Router：通过查询参数或浏览器历史返回上一页，或在微前端下回到指定应用。

API

vue

<template>
  <ElSimplePageHeader
    :back-text="backText"
    :title="title"
    :first-tab-label="firstTabLabel"
    :default-tab="defaultTab"
    :tab-config="tabConfig"
    :before-change="beforeChange"
    :after-change="afterChange"
    @tab-change="handleTabChange"
    @tab-change-error="handleTabChangeError"
    @back="handleBack"
  >
    <template #back>
      <!-- 自定义返回区域（图标+文案等） -->
    </template>
    <template #extra>
      <!-- 额外内容 -->
    </template>
    <template #default="{ uid }">
      <Portal :to="`${uid}-actions`" :order="10">
        <!-- 内容 -->
      </Portal>
    </template>
  </ElSimplePageHeader>
</template>

Props

属性名	描述	类型	默认值
backText	返回按钮文案（未使用 `#back` 插槽时生效）	`string`	`'返回'`
title	页面标题	`string`	-
firstTabLabel	第一个选项卡的标签文本	`string`	`'申请信息'`
defaultTab	默认选中的选项卡的值	`string`	`'0'`
tabConfig	选项卡列表	`EllSimplePageHeaderTab[]`	`[{ label: '申请信息', value: '0' }, { label: '流程图', value: '1' }]`
beforeChange	选项卡改变前的拦截函数	`(value: string) => Promise<boolean>`	-
afterChange	选项卡改变后的拦截函数	`(value: string) => Promise<void> \| void`	-

Events

事件名	描述	参数
tabChange	选项卡改变时触发	`(value: string) => void`
tabChangeError	选项卡切换时 `beforeChange` 抛出错误时触发	`(error: unknown) => void`
back	返回按钮点击时触发	`() => void`

Slots

插槽名	描述	参数
back	自定义返回区域（替换默认的图标+文案）	-
extra	右侧额外内容区域	-
default	用于 portal-vue 动态插入内容	`{ uid: string }`

Portal 目标

目标位置	描述
`${uid}-actions`	无 `#title` 时页头右侧操作区；与 `el-form-query` 命名一致，多段内容用 `order` 排序。

类型说明

主包导出：

import type {
  EllSimplePageHeaderProps,
  EllSimplePageHeaderTab,
} from 'element-plus-lab'

EllSimplePageHeaderProps：与上文 Props 表一致（含可选 uid）。
EllSimplePageHeaderTab：选项卡 label / value。

显示类型声明

export interface EllSimplePageHeaderTab {
  label: string
  value: string
}

export interface EllSimplePageHeaderProps {
  uid?: string
  backText?: string
  title?: string
  firstTabLabel?: string
  defaultTab?: string
  tabConfig?: EllSimplePageHeaderTab[]
  beforeChange?: (value: string) => Promise<boolean>
  afterChange?: (value: string) => Promise<void> | void
}

贡献者

jenemy

页面历史

最后编辑于大约 1 小时前

查看完整历史

ElSimplePageHeader 页面头部 ​

基础用法 ​

高级用法 ​

自定义选项卡 ​

选项卡切换事件 ​

页面回退（返回）说明 ​

API ​

Props ​

Events ​

Slots ​

Portal 目标 ​

类型说明 ​

贡献者