背景往往在管理后台系统中，vue-router 要做更多的事情挂载组件到页面根据不同的用户角色，如：超级管理员，审计用户，普通用户等来做权限管理生成复杂的侧边栏那么，如何使用一套定义好的 router 来做到以上三个需求呢？分析首先，我们来细致的分析一下这三个需求有哪些具体需要挂载组件到页面中想必不用多说了，vue-router 本来就是做这个的区分不同用户角色用户角色是用户登录后后台返回的，比如
转载
2024-09-27 18:23:20
255阅读
【vue+ElementUI】实现NavMenu侧边导航栏的手动缩放功能一、背景二、解决方式1、鼠标悬停显示完整内容2、实现对侧边栏宽度的手动缩放功能A.效果展示B.侧边栏的手动缩放C.折叠功能的实现3.注意事项三、总结 一、背景最近在做个开源webapp项目，在使用ElementUI的NavMenu侧边导航栏过程中，由于title过长，会产生文字溢出的bug： 对于这样情况题主所思考的解决方法
转载
2024-03-19 16:00:06
1581阅读
样式main.jsimport Vue from 'vue'import App from './App.vue'//全部引入// import ElementUI from 'eleme
原创
2023-03-14 09:22:48
966阅读
添加 编辑 删除 角色 都与上一篇 用户类似 只是接口不同 我们只关注其他不一样的： 展开渲染标签编辑权限el-table-column type="expand" 设置了 expand 则显示为一个可展开的按钮显示图上的效果 使用了 三重for循环 按照 tree 数据结构 .children 取得
转载
2024-07-07 06:03:39
209阅读
Vue国产渐进式javaScript框架易用：熟悉HTML CSS javaScript可快速上手灵活：在一个库和一套完整的框架之间自如伸缩高效:20KB运行大小,超快虚拟DOM(渲染页面速度超快)运行原理：Vue代码>Vue框架解析>js原生代码Vue基本语法MVVM设计思想M模型(model) DataV视图(view) DOMVM视图模型 new Vue({}) 实现控制逻辑Vu
文章目录XX课堂后台视频管理理系统之首页开发介绍mock.js及axios全局配置随机生成数据使用element布局组件实现首页布局完成首页除图表外的内容完成左边用户头像和登录信息完成右边显示数据完成首页table部分及ECharts介绍首页table部分ECharts的使用谈封装一个EChart组件的一些想法上手封装一个EChart组件并处理数据展示图表修改EChart组件样式及自适应图表修改
开发模式：前后端分离项目描述：电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。技术栈：前端项目技术栈： Vue Vue-router Element-UI Axios Echarts后端项目技术栈：NodeJsexpressjwtMysqlsequelize前端项目初始化步骤：安装vue脚手架通过
1. 侧边菜单<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
router>
<el-menu-item index="/home/search
转载
2024-02-17 13:00:05
781阅读
一、实现效果这里以学生成绩管理系统为例，整体布局以及实现效果如下所示： 二、整体布局 整体布局采用elementui 中Container 布局容器组件实现，如下所示。 整个页面布局页面为main.vue，其中左侧菜单栏部分被封装为一个组件（ MenuTree），菜单部分使用elementui 中Menu 菜单组件来实现，其中el-menu当中参数uniqu
转载
2024-02-11 14:39:54
2286阅读
从数据填充开始讲起，介绍Excel内置各种功能，如筛选、查询、粘贴、单元格类型等… excel窗口组成介绍： 1、快速访问工具栏：添加你常用的命令，方便我们快速操作和访问； 2、标题栏：此处一般显示excel工作簿的保存名称；3、选项卡：其实这里就是excel的菜单栏，这里呈现了刻在excel中执行的核心任务； 4、工具栏：这里我们都知道，这里属于excel的工具栏，我们
转载
2024-03-24 14:48:06
298阅读
在我们整体的项目开发中，对项目框架的整体布局是非常重要的一环，其中侧边栏会涉及到一级一级嵌套以及项目迭代的问题，而且还涉及到路由的问题，所以用树形结构显然不合适，我们需要考虑迭代的问题，所以我们选择用递归组件对侧边栏进行布局，新增菜单只需要在数据层添加即可，可以无极限嵌套菜单级别，而达到了一劳永逸的效果。首先我们需要有自己侧边栏的数据（前端自己写静态数据或从后台获取）：data.js:export
转载
2024-08-23 11:52:01
305阅读
文章目录一、前言二、左侧菜单动态显示原理三、总结 一、前言项目已经进展3个月，今天才来处理左侧菜单和用户角色之间的对应关系；比如：管理员登录可以看到用户管理菜单，普通用户登录看不见这个菜单；虽说vue-element-admin中已经带有相关角色菜单动态显示功能，但是说简单也挺复杂的，你得要先看懂代码，然后你才能动手去改，里面代码逻辑嵌套比较深，特别是在 Vuex.Store 状态数据存放类中
基于Vue的电商管理系统(2)上一节已经实现该系统的登陆界面、路由、登录、退出及导航守卫功能，本期将继续完善该系统的以下功能：从后端获取后台列表数据并渲染到前端页面、用户列表的展示、修改、删除和添加。1.后台首页基本布局1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户本系统后台将采用Element UI 中的Container布局容器。基本结构如下： 
1. 项目概述1.1 电商后台管理系统的开发模式（前后端分离） 后端：操作数据库、向前端暴露api 接口前端：制作页面，利用ajax调用后端api接口前后端分离开发模式：后端写接口，前端调接口前端技术栈vuevue-routerElement-UI 前端UI组件库Axios 发起网络数据请求Echarts 绘制报表后端技术栈Node.jsExpressJwt 状态保持工具 模
el-element组件库中的el-menu组件用来做侧边栏导航非常方便我在做vue后台管理系统项目时，侧边栏导航选用了右边这种布局 可以发现初始页面路径为'/home/，也就是主页，侧边栏也因此对应着高亮“首页”选项。此外选择其他选项，也能对应着跳转到目标路径，同时高亮对应侧边栏选项。具体设置代码如下：<template>
<el-menu
:defa
转载
2024-04-22 11:03:57
1769阅读
背景往往在管理后台系统中，vue-router 要做更多的事情挂载组件到页面根据不同的用户角色，如：超级管理员，审计用户，普通用户等来做权限管理生成复杂的侧边栏那么，如何使用一套定义好的 router 来做到以上三个需求呢？分析首先，我们来细致的分析一下这三个需求有哪些具体需要挂载组件到页面中想必不用多说了，vue-router 本来就是做这个的区分不同用户角色用户角色是用户登录后后台返回的，比如
转载
2024-10-30 21:32:47
188阅读
tomizations": { "[Default Light+]": { "activityBar.activeBackground": "#ffffff",
原创
2022-09-07 10:42:06
2081阅读
我已经将VSCode主题设置成了浅色，但是侧边栏仍然是灰色，如下图所示。那怎么将左边的工具栏也设置成白色呢？我们可以使用【ctrl +shift +p】快捷键输入【setting】然后选择【Open Setting(Json)】打开setting.json文件，然后添加如下内容。"workbench.colorCustomizations": {
"[Default Light+]": {
转载
2021-01-28 19:25:35
1113阅读
2评论
ScrollView 组件ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与Mask组件配合使用，同时也可以添加ScrollBar组件来显示浏览内容的位置。 点击 属性检查器 下面的 添加组件 按钮，然后从添加 UI组件中选择ScrollView，即可添加ScrollView组件到节点上。滚动视图的脚本借口
转载
2024-05-19 18:00:53
1814阅读
这段时间在研究element-admin，感觉这个库有许多值得学习的地方，我学习这个库的方法是，先看它的路由，顺着路由，摸清它的逻辑，有点像顺藤摸瓜。这个库分的模块非常清晰，适合多人合作开发项目，但是如果一个人去用这个库开发后台，步骤显的有点繁琐，特别是调用后端接口，之前一个方法就调用到了，但是用这个库，需要先后分几步调用。比如说调用一个登陆接口：点击登陆按钮----》调用store中的方法---
转载
2024-08-25 09:05:22
88阅读
