Page Header 页头

如果页面的路径比较简单,推荐使用页头组件而非面包屑组件。

完整示例

基础用法

简单场景下的标准页头。

自定义图标

默认图标可能无法满足您的需求,您可以通过设置icon属性来自定义图标,示例如下。

无图标

有时,页面全是元素,您可能不想展示页面上方的图标,您可以设置icon属性值为null来去除它。

面包屑导航

使用页头组件,您可以通过添加插槽 breadcrumb 来设置面包屑路由导航。

额外操作部分

头部可能会变得很复杂,您可以在头部添加更多的区块,以允许丰富的交互。

主要内容

有时我们想让页头显示一些协同响应内容,我们可以使用 default 插槽。

组件插槽结构

本组件由这些部件构成:

<template>
  <el-page-header>
    <!-- Line 1 -->
    <template #breadcrumb />
    <!-- Line 2 -->
    <template #icon />
    <template #title />
    <template #content />
    <template #extra />
    <!-- Lines after 2 -->
    <template #default />
  </el-page-header>
</template>

Page Header 属性

属性名说明类型可选值默认值
icon图标组件string | ComponentBack
title标题stringBack
content内容string

Page Header 事件

事件名说明参数
back点击左侧区域触发

Page Header 插槽

名称说明
icon自定义图标
title标题内容
content内容
extra扩展设置
breadcrumb面包屑内容
default默认内容

源代码

组件文档

贡献者