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>
相关推荐
BangD6 小时前
前端elementUI el-form个别字段增加校验
前端·vue.js·elementui
一个打工仔的笔记3 天前
vue3 elementui plus 可编辑表格 完整例子
前端·vue.js·elementui
1314lay_10074 天前
el-table表格数据分页切片,导致表格的多选失效
javascript·vue.js·elementui
1314lay_10074 天前
Vue+C#根据配置文件实现动态构建查询条件和动态表格
javascript·vue.js·elementui·c#
1314lay_10074 天前
axios的Post方法和Delete方法的参数个数和位置不同,导致415错误
前端·javascript·vue.js·elementui
A_nanda5 天前
Vue2 表单提交异常详细排查方案
javascript·vue.js·elementui
千码君20169 天前
kotlin:jetpack compose 生成动态可控的动画
vue.js·elementui·kotlin
牧杉-惊蛰9 天前
修改表格选中时的背景色与鼠标滑过时的背景色
前端·javascript·css·vue.js·elementui·html
没有故事、有酒10 天前
Vue2中el-table修改表头高度和行高
javascript·vue.js·elementui
蒙面价肥猫11 天前
el-popconfirm 弹窗不显示问题总结
vue.js·elementui