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>

API

Attributes

属性名	说明	类型	默认
icon	Page Header 的图标 Icon 组件	`string` / `Component`	Back
title	Page Header 的主标题，默认是 Back (内置 a11y)	`string`	''
content	Page Header 的内容	`string`	''