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>
相关推荐
小救星小杜、10 分钟前
el-form 表格校验 开始和结束时间,时间选择范围
javascript·vue.js·elementui
克里斯蒂亚诺更新14 分钟前
使用elementUI的表格报错ResizeObserver loop completed with undelivered notifications.
前端·javascript·elementui
qiqiliuwu3 小时前
VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)
前端·javascript·elementui·typescript·vue
Java程序员-小白4 小时前
Sa-Token过滤器引发的CORS误判问题
vue.js·elementui·axios·cors
梁山好汉(Ls_man)1 天前
JS_使用脚本填充基于Vue的用户名密码输入框并触发登录
javascript·elementui·vue
Irene19911 天前
Tailwind CSS vs Bootstrap vs ElementUI(ElementPlus) 全面对比表
elementui·bootstrap·element plus·tailwind css
Aotman_2 天前
Vue el-table 字段自定义排序(进阶)
前端·javascript·vue.js·elementui·前端框架·ecmascript
凡大来啦2 天前
Element plus的Select选择器点击不出现下拉列表
javascript·vue.js·elementui
dy17173 天前
element-ui输入框换行符占位问题处理
vue.js·elementui
qq_316837755 天前
Element-Plus el-table lazy 自动更新子列表
前端·vue.js·elementui