element ui 面包屑
时间: 2023-08-31 07:10:16 浏览: 91
vue 封装面包屑组件教程
Element UI提供了面包屑(Breadcrumb)组件,用于展示当前页面在系统层级结构中的位置。
你可以使用`el-breadcrumb`标签来创建一个面包屑组件,然后在其中使用`el-breadcrumb-item`标签来定义每个面包屑项。每个面包屑项可以包含一个链接或文本。
下面是一个示例代码:
```html
<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
```
在上面的示例中,`el-breadcrumb`标签定义了一个面包屑组件,其中的`el-breadcrumb-item`标签定义了三个面包屑项。第一个面包屑项是一个链接,指向首页;后两个面包屑项是文本。
你可以根据实际需要添加更多的面包屑项,并使用`:to`属性设置链接目标。
注意要正确引入和注册Element UI库,以及按需引入所需的组件。
阅读全文