element-ui面包屑

2023-11-03 15:40
文章标签 ui element 面包屑

本文主要是介绍element-ui面包屑,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

思路:

<1>动态绑定面包屑的路由和名称 

       <el-breadcrumb-item  v-for="item in breads"  :key="item.title" :to="{ path: item.path }"> 

             {{item.title}}

       </el-breadcrumb-item>

<2>在router里的meta里加入每一个路由的title

<3>装面包屑动态的方法,默认首页:let temp = [{ path: "/home", title: "首页" }],

      遍历 this.$route.matched,如果有meta.title,则把这个对象添加到数组temp,最后将temp赋值给breads,最后由breads去实现动态绑定

      this. $route获取路由的信息对象,打印出来是这样

       this.$route.matched为,与此路由匹配到的路由的信息,这里主要用里面的meta

<4>在一进入页面就要展示,所以在created里调用。切换路由也要调用,利用watch监听路由        的变化

//1.放入面包屑<el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-itemv-for="item in breads":key="item.title":to="{ path: item.path }">{{item.title}}</el-breadcrumb-item></el-breadcrumb>
//2.绑定数据data() {return {//面包屑数据breads: [{ title: "", path: "" }]};
//3.在router.index中加入meta{title:}//销售统计{path: "/total",component: Layout,redirect: "/total/goods-total",meta: { title: '销售统计' },children: [{path: "/total/goods-total",component: () => import("../views/total/GoodsTotal.vue"),meta: { title: '商品统计' },},{path: "/total/order-total",component: () => import("../views/total/OrderTotal.vue"),meta: { title: '订单统计' },},]},
//4.封装函数methods: {//面包屑动态的方法liveBreads() {let temp = [{ path: "/home", title: "首页" }];//默认首页放第一个this.$route.matched.forEach(val => {if (val.meta.title) {temp.push({ path: val.path, title: val.meta.title });}});this.breads = temp;},
//5.放在created(),打开页面就调用created() {//一进入页面就调用面包屑方法this.liveBreads();},
//6.watch监听路由watch: {//监听路由发生的改变//$route.path获取当前路由"$route.path"() {this.liveBreads();}},

这篇关于element-ui面包屑的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/qq_45837267/article/details/129827635
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/339170

相关文章

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术:​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例:简单按钮

在 PyQt 加载 UI 三种常见方法

《在PyQt加载UI三种常见方法》在PyQt中,加载UI文件通常指的是使用QtDesigner设计的.ui文件,并将其转换为Python代码,以便在PyQt应用程序中使用,这篇文章给大家介绍在... 目录方法一:使用 uic 模块动态加载 (不推荐用于大型项目)方法二:将 UI 文件编译为 python 模

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Golang GUI入门——andlabs ui

官方不提供gui标准库,只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的,并不是谷歌官方出品,现在停止维护,只好作罢。 第三方gui库 找了好多,也比较了好多,最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好,期待更优秀的gui库 由于andlabs

移动UI:分类列表页、筛选页的设计揭秘。

移动UI的列表页设计需要考虑用户体验和界面美观性,以下是一些建议的设计要点: 1. 列表项的展示: 列表页应该清晰地展示各个列表项,包括标题、副标题、缩略图等内容,以便用户快速浏览和识别。可以使用卡片式布局或者简洁的列表布局。 2. 搜索和筛选: 如果列表项较多,应该提供搜索和筛选功能,方便用户查找感兴趣的内容。搜索框和筛选条件可以放置在页面顶部或者底部,以便用户方便操作。

UI自动化测试常见面试题

1、什么是UI自动化测试? UI自动化测试是一种通过模拟用户交互并自动执行UI操作的软件测试方法。它用于验证用户界面的功能和稳定性,以确保在不同的操作系统、浏览器和设备上的一致性。 2、UI自动化测试的优势和劣势是什么? 优势: 可以节省时间和成本,提高测试效率。 可以自动执行大量的重复测试任务,减少人为错误。 可以实现广泛的测试覆盖,包括不同的操作系统、浏览器和设备。 可以提供稳定