element-ui中导航组件menu的一个属性:default-active说明

目录
  • 导航组件menu的一个属性:default-active
  • default-active的使用

导航组件menu的一个属性:default-active

在el-menu中添加属性，然后就可以得到当我们点击的时候，就可以达到高亮的作用。

操作代码如下：

我们需要动态的绑定default-active

default-active的使用

default-active需要传进去的值就是子导航的index值（也就是其路由值），达到点击路由就可以引起高亮。

1.首先是在index处动态接收api里面的路由名称

2.然后点击事件时用函数获取路由名称

<!-- 二级菜单 -->
            <el-menu-item
            :index="'/' + items.path" 
            //首先是在index处动态接收api里面的路由名称
            v-for="items in item.children"
            :key="items.id"
            @click="activeItem('/' + items.path)" 
            //然后点击事件时用函数获取路由名称
            >

3.点击时，通过函数将路由值保存到本地,同时再created里面申明

activeItem (path) {
      window.sessionStorage.setItem('activePath', path)
      this.activePath = path
    }
created () {
    this.activePath = window.sessionStorage.getItem('activePath')
  }

4.然后将本地的路由值动态的传给default-active

<el-menu :default-active="activePath"></el-menu>

注：

1.sessionStorage 属性允许你访问一个，对应当前源的 session Storage对象。它与  localStorage相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

语法：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
 
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
 
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
 
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

2.created什么时候使用

vue.js中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。data与methods已经初始化，但是还没有编译模板。–【请求数据】

一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。

create方法，在页面还未渲染成html前，调用函数，从后端获取数据，在实现对页面的数据进行显示

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

    具体代码如下所示: <el-menu :default-active='$route.path' :router='true' :unique-opened='true' :default-openeds="defaultOpeneds" background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b"> //router当导航激活时允

  • Vue使用element-ui实现菜单导航

    Vue使用element-ui实现菜单导航

    本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码,供大家参考,具体内容如下 效果图 目录截图 安装vue-router 和 element-ui vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 npm install vue-router --save npm install element-ui --save 关闭ESLint检查 新增配置文件src/vue.config.js 文件 module.exports = { lint

  • element-ui使用导航栏跳转路由的用法详解

    最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子,在这基础上再修改成我们想要的样子. <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSe

  • element-ui中导航组件menu的一个属性:default-active说明

    element-ui中导航组件menu的一个属性:default-active说明

    目录 导航组件menu的一个属性:default-active default-active的使用 导航组件menu的一个属性:default-active 在el-menu中添加属性,然后就可以得到当我们点击的时候,就可以达到高亮的作用. 操作代码如下: 我们需要动态的绑定default-active default-active的使用 default-active需要传进去的值就是子导航的index值(也就是其路由值),达到点击路由就可以引起高亮. 1.首先是在index处动态接收api里面

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • element UI中在 el-select 与 el-tree 结合组件实现过程

    前言 项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程. 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾选框,可进行勾选,且是单选勾选后需要返回勾选的层级以及它的父级 实现效果如下: 数据回显效果: 实现关键部分 el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框,可进行勾选”这个需求,所以我修改了el-tree的源码进行使用. 追加子级

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Android中导航组件Navigation的实现原理

    对于导航组件的使用方式不是本文的重点,具体使用可以参考官方文档,导航组件框架是通过fragment来实现的,其核心类主要可以分为三个NavGraph.NavHostController.NavHostFragment,这三个类的作用分别是: NavGraph: 解析导航图xml获取到的对象,其内部主要维护了一个集合用来存储目的地,当导航到目的地时,会传递进来一个id,这个id可能导航图xml中fragment的id,也有可能是fragment节点下action节点的id,如果是action节点的

  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

  • Python中Tkinter组件Menu的具体使用

    Python中Tkinter组件Menu的具体使用

    目录 何时使用 Menu 组件? 用法 参数 方法 Menu(菜单)组件用于实现顶级菜单.下拉菜单和弹出菜单. 何时使用 Menu 组件? Menu 组件通常被用于实现应用程序上的各种菜单,由于该组件是底层代码实现,所以不建议你自行通过按钮和其他组件来实现菜单功能. 用法 创建一个顶级菜单,你需要先创建一个菜单实例,然后使用 add() 方法将命令和其它子菜单添加进去: import tkinter as tk root = tk.Tk() def callback(): print("~被调用

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

随机推荐