el-breadcrumb(面包屑)和el-page-header(页头)的入门学习

适用场景

el-breadcrumb可用于展示复杂导航栏的层级结构
el-page-header可用于展示简单的导航栏层级结构

知识点

  1. el-breadcrumb嵌套el-breadcrumb-item使用
  2. el-breadcrumb的separator设置分割字符，默认/
  3. el-breadcrumb的separator-class设置分割图标，会覆盖分割字符效果
  4. el-breadcrumb-item的to设置跳转的路径，暂时不会使用
  5. el-page-header的@back设置点击返回时的钩子
  6. content为分割符右侧的文本内容设置

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <el-breadcrumb separator='/' separator-class='el-icon-arrow-right'>
            <el-breadcrumb-item to="{path:'/'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href='http://www.baidu.com'>部门</a></el-breadcrumb-item>
            <el-breadcrumb-item>产业部门</el-breadcrumb-item>
        </el-breadcrumb>
        <el-page-header @back='handleBank' content='修改详情'></el-page-header>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{

            }
        },
        methods:{
            handleBank(){
                console.log("go back")
            }
        }
    })
</script>

官网

el-breadcrumb和el-page-header的学习官网

# 学习 # elementui
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟