ElementUI浅尝辄止29:Breadcrumb 面包屑

显示当前页面的路径,快速返回之前的任意页面。

1.如何使用?

el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性,在el-breadcrumb标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/

javascript 复制代码
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

2.图标分隔符

通过设置 separator-class 可使用相应的 iconfont 作为分隔符,注意这将使 separator 设置失效

javascript 复制代码
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
相关推荐
D_C_tyu13 天前
Vue3 + Element Plus | el-table 多级表头表格导出 Excel(含合并单元格、单元格居中)第二版
vue.js·elementui·excel
跟着珅聪学java13 天前
Element UI 的 el-input组件触发 blur事件
javascript·vue.js·elementui
Komorebi゛13 天前
【Vue + Element Plus】el-tree树结构样式改造,添加转折线
前端·javascript·vue.js·elementui
花生柿子13 天前
在elementui可横向滚动的table中,操作列有时候会透视下面的行
前端·javascript·elementui
敲代码的小吉米13 天前
Element Plus 表格中的复制功能使用指南
前端·javascript·elementui
小白探索世界欧耶!~20 天前
Vue2项目引入sortablejs实现表格行拖曳排序
前端·javascript·vue.js·经验分享·elementui·html·echarts
css趣多多22 天前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
EstherNi23 天前
仿照elementui写图片放大的案例,但多加了下载按钮,vue3
javascript·vue.js·elementui
糕冷小美n25 天前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
沐墨染25 天前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code