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>
相关推荐
xiaogg36788 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
我的心巴2 天前
vue-print-nb 打印相关问题
前端·vue.js·elementui
Amy_cx2 天前
在表单输入框按回车页面刷新的问题
前端·elementui
xiaogg36783 天前
网站首页菜单顶部下拉上下布局以及可关闭标签页实现vue+elementui
javascript·vue.js·elementui
白云~️3 天前
table表格合并,循环渲染样式
javascript·vue.js·elementui
夏之小星星4 天前
解决el-select选择框右侧下拉箭头遮挡文字问题
前端·vue.js·elementui
xiaogg36784 天前
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
前端·vue.js·elementui
Luffe船长4 天前
elementUI点击浏览table所选行数据查看文档
javascript·elementui·vue
入行IT两年半4 天前
element-plus 单选组件 el-radio,选不上,又没报错,直接复制官网也不行解决方案
前端·vue.js·elementui
IT瘾君4 天前
JavaWeb:前端工程化-ElementPlus
前端·elementui·node.js·vue