最近在写框架，开发主页面的时候布局采用的是左侧菜单栏的形式，因为没有现成的轮子与使用技术栈的原因，选择使用elementui的navmenu控件进行改造，实现多层级的菜单栏展现样式，先上个效果图因为是使用asp.net mvc5进行的开发，所以不可能使用webpackge纯前端的方式使用vue单文件的形式造轮子，所以经过搜索，决定使用x-template类型的脚本文件作为模板载体进行二次封装，首先
转载
2024-03-04 07:06:52
853阅读
思路：方法1.按照以往的动态菜单来做，就是根据权限调取后端接口，获取相应的菜单数据，对数据进行处理，添加到路由对象中方法2.自己在router.js中写全部的路由，然后设置一个标识，可以是id可以是编码，通过调取后端的接口，对数据进行标识匹配然后进行处理和添加方法3.写一点共用的不用权限控制路由的公用路由，然后再写一些因为业务需要展示的父级目录，然后把其他的父级和子级都拆分成一级的，写上主要的co
转载
2024-01-31 04:17:21
120阅读
先上效果图↓↓↓目前我们要做的效果就是左边这一块因为是基于elementUI的，所以需要先下载elementUI的依赖，老手可忽略npm i element-ui -S同时还需要用到vuex，用于控制头部标签与左边菜单栏的同步操作 安装vuex依赖npm install vuex --save如果你是小白，请先学会vuex的使用目前的功能没有使用到vuex，后续功能会用到，所以目前vuex可以忽略
转载
2024-05-04 17:22:31
221阅读
精彩回顾如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化编辑器－DooringTS核心知识点总结及项目实战案例分析前言本文是继 前端如何一键生成多维度数据可视化分析报表 实战的最后一篇文章, 主要介绍如何实现后台管理系统的权限路由和权限菜单. 希望通过这3篇文章的复盘和实战, 可以让大
vue中，右键菜单组件v-contextmenu的使用1、效果右键菜单之禁用和子菜单2、流程第一步：安包npm install v-contextmenu --save-dev
npm install --save vue-runtime-helpers第二步：引入src/main.jsimport contentmenu from 'v-contextmenu'
import 'v-contex
转载
2024-10-13 18:45:38
263阅读
el-cascader-plus经常碰到懒加载不回显的问题，使用起来很不方便，于是花了些时间二次开发了这个组件，下次遇到同样问题就能直接解决，在此开源出来，希望对遇到相同问题的人有帮助。开源互助使程序的世界更美好！el-cascader-plus基于 element-ui 级联二次封装，弥补了原 element-ui 级联组件懒加载经常无法回显的不足，用法与原级联组件一致。使用前请确保安装了 vu
转载
2024-02-15 15:02:33
141阅读
参考如下：https://element.eleme.io/#/zh-CN/component/menu先直接遍历路由列表，显示需要显示的导航元素。 <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect"> <template v-for="(ite...
原创
2021-07-14 11:43:29
2269阅读
前言：首先，我们需要知道，动态路由菜单并非一开始就写好的，而是用户登录之后获取的路由菜单再进行渲染，从而可以起到资源节约何最大程度的保护系统的安全性。需要配合后端，如果后端的值不匹配，做成动态路由会很复杂。第一部分： 获取到用户渲染的菜单路由数据1.用户登录成功，获取到用户的菜单路由。res.meauList（用户菜单数据） 2.菜单数据格式:"meauList": [
最近项目重构，因为之前一直在使用 vue-element-admin 框架，但是该项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为该项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。作者这里用的是 vue-element-template 版本，有什么需要都可以去 vue-element-admin 复制。 集成方
转载
2024-05-13 19:08:41
135阅读
通过Vue编写一个二级，并且是可以折叠的导航菜单 文章目录思路在main.js中 配置axios导入element样式Home.vue实现静态页面、样式及功能 思路在侧边栏区域只写了一个二级导航，通过axios获取到侧边栏的数据，通过v-fot循环渲染该数据，形成多个二级菜单 使用elemen-ui进行样式的设置在main.js中 配置axios导入axios包配置请求的根路径把axios包挂载到
转载
2024-03-25 07:57:35
1264阅读
$("li:has(ul)").click(function(event){ if(this==event.target){//IE不支持target,必须要加这句 $(this).css('list-style-image',(!$(this).children().is(':hidden'))?'url(images/plus.gif)':'url(images/min
原创
2023-03-19 09:03:22
146阅读
代码附上：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equi
转载
2023-07-22 19:34:47
71阅读
多级菜单# -*- coding: utf-8 -*-
__author__ = 'am_mm_NO.1'
import re
memu = {
"东北":{
"吉林
转载
精选
2016-06-20 23:23:11
1103阅读
{
path: '/hxb_sys',
component: Layout,
redirect: '/hxb_sys/branch',
name: 'hxBank',
meta: {
title: '华夏银行',
icon: 'el-icon-s-help'
},
children: [
{ // 二级菜单1
原创
2023-08-23 16:48:26
93阅读
1:还是先上图 （出于保密原因，这里数据需要涂鸦，请谅解）可以看到 红箭头所指的进度条显示的是菜单栏竖向的进度，本例中我所有的子菜单一共有300多个 但是大的分类只有6个 那我们开发的时候是不是要一个个在前端写好呢？这未免太恐怖也太可怕，加入我们的菜单要添加一个呢 换起来也麻烦。所以正确的做法是菜单从数据库中读取。2：下面就来展示下数据库的结构 这里我只要显示3个
转载
2023-08-27 22:31:53
115阅读
目录效果如下这个功能主要是靠elementUI的tab+Vuex来实现的，下面就来介绍如何实现的思路：首先我们正常点击菜单跳转页面是靠路由实现的，然后我们需要点击菜单生成tab页和设置显示的tab页，所以我们需要用Vuex定义一个数组options，用来存放添加进去的tab页，还有一个设置显示哪个tab页的属性activeIndex，所以在点击时我们把这个页面的信息存放到options里面...
原创
2021-09-02 11:13:09
2089阅读
鼠标可以说是一个划时代的发明了，通过左右键的使用，基本囊括了PC操作中的一些常见动作，远远要好过触摸屏的点点点，手势识别等。FileMenu Tools是一个加强邮件菜单的工具软件，非常的实用跟方便，支持自定义设置，好好研究透了的话，提高效率等等都不在话下。FileMenu Tools支持自定义如下的功能：激活运行外部应用程序复制/移动到特定文件夹删除特定的文件类型将选定的文件作为附件发送到电子邮
原创
2021-07-15 16:10:32
587阅读
本次记录基于iview3框架实现多级菜单+vue router实现页面切换方法一：使用Tree 树形控件，官方文档https://www.iviewui.com/components/tree以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/" ，如果没有自己手动加或后端改，没有这
我写技术文章没那么多废话，直接上代码： 1.效果预览： 其中，superColumns与columns是根据后端返回的数据决定的，是动态的。 2.在vue里面的代码：<el-table
ref="multipleTableRef"
v-loading="state.loading"
:data="list"
ce
转载
2024-04-01 17:52:45
277阅读
