保持左侧菜单的激活状态

news/2024/7/10 0:54:13 标签: vue, js, html5, es6

el-menu有一个属性:
在这里插入图片描述可设置default-active="/users",设置index为/users的选项为激活状态
但是这样就写死了,选择其他选项的时候不会激活,故需要进一步优化。
主要思想,选中选项,将当前选中的选项的index替换掉default-active中的值
修改Home.vue

     <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
            :default-active="activePath"
        >
        ......
   <!--二级菜单-->
  <!--启用el-menu中就会将index的值作为路由路径-->
<el-menu-item :index="'/'+ subItem.path" v-for="subItem in item.children"
               :key="subItem.id" @click="saveNavState('/'+ subItem.path)">
	.....
	data() {
      return {
        //左侧菜单数据
        menulist: [],
        iconsObj: {
          '125': 'el-icon-user-solid',
          '103': 'el-icon-bank-card',
          '101': 'el-icon-s-shop',
          '102': 'el-icon-s-order',
          '145': 'el-icon-s-data'
        },
        isCollapse: false,
        //被激活的链接地址
        activePath:''
      }
    },      
    ....
     created() {
      this.getMenuList()
      // this.saveNavState(window.sessionStorage.getItem('activePath'))
    },         
    .....
    //保存链接的激活状态
      saveNavState(activePath){
        this.activePath=activePath
        // window.sessionStorage.setItem('activePath',activePath)
      }

http://www.niftyadmin.cn/n/1799030.html

相关文章

WDS部署0-部署测试环境

这几篇文章是公司WDS部署的文档&#xff0c;全是自己写的&#xff0c;希望对各位有帮助&#xff0c;如有问题请留言所需要资源较为简单&#xff0c;我用的物理机是I3的CPU&#xff0c;内存8G。测试环境&#xff1a;主机WIN7 X64使用workstation 10.0 虚拟出3台虚拟机进行测试虚…

绘制用户列表组件的基础布局结构

因为需要在所有的界面中有面包屑和卡片&#xff0c;所以在全局样式globe.css中加入&#xff1a; .el-breadcrumb{margin-bottom: 10px; }components/user/Users.vue写入&#xff1a; css <template><div><!--面包屑导航区域--><el-breadcrumb separator…

自定义状态列的显示效果

使用作用域插槽获取当前行数据 <!--用户列表区域--><!--stripe隔行变色&#xff0c;border加表格竖线--><el-table :data"userList" stripe border><!--加索引页--><el-table-column type"index" label"#"></e…

文本自动摘要(classifier4J )

2019独角兽企业重金招聘Python工程师标准>>> 摘要的实现方法有摘取性和概括性两种。摘取性的方法相对容易实现&#xff0c;通常的实现方法是摘取文章中的重要句子。 sourceforge.net 中有一个项目classifier4J 通过抽取指定的文本中的重要的句子形成摘要。 String i…

通过作用域插槽渲染操作列

修改el-table里的内容&#xff1a; <!--用户列表区域--><!--stripe隔行变色&#xff0c;border加表格竖线--><el-table :data"userList" stripe border><!--加索引页--><el-table-column type"index" label"#">&…

Uliewb-Admin 项目

2019独角兽企业重金招聘Python工程师标准>>> 这几天初步实现了一个简单的uliweb-admin的项目&#xff0c;它是可以用来统一管理uliweb的Model。现在项目具备了一些基本功能&#xff0c;如&#xff1a;显示列表&#xff0c;増加&#xff0c;删除&#xff0c;修改等。…

实现分页效果

在表格<el-table>后增加一个分页组件 size-change“handleSizeChange”&#xff1a;每页显示条数变化后调用方法 current-change“handleCurrentChange”&#xff1a;页码变化调用方法 :current-page“queryInfo.pagenum”&#xff1a;当前页数 :page-sizes"[1, 2, …

node.js从数据库获取数据

2019独角兽企业重金招聘Python工程师标准>>> 需要用node.js做一个从Sqlserver获取数据并显示到页面上的小功能。 app.js ... var sqlbll require(./routes/sqlbll); ... app.get(/sqlbll/:ver, function(req, res){ var versionIdreq.params.ver; //sql…