6. vue-element-admin 二次开发避坑指南

vue-element-admin 二次开发避坑指南

    • 1.1 前言
      • 1.1.1 切换标签时未保存页面的操作内容
      • 1.1.2 markdown 样式乱码
      • 1.1.3 修改默认尺寸
      • 1.1.4 当后端服务器宕机情况下页面加载层一直转圈无法停止,只能关闭页面
      • 1.1.5 隐藏齿轮

1.1 前言

上一篇博文,我们分享了vue-element-admin二次开发的改造优化技巧,这篇博文汇总 vue-element-admin 二次开发可能遇到的坑。

1.1.1 切换标签时未保存页面的操作内容

有时候会发现一个神奇的现象,当打开多个tab标签,然后当修改某个标签页面内容,再次切换标签页面的时候,会发现之前改动过的标签页的内容重新加载了。。。

根本原因:

路由配置时name与页面设置的name 不匹配导致,因为框架中中默认是会缓存tag页面的,也就是noCache参数默认就是false

路由配置中的 name
在这里插入图片描述
export-excel.vue 页面中的 name
在这里插入图片描述
修复方案:将两个 name保持一致即可。

  • 参考文献:Vue+Element+admin 页签切换刷新页面问题

1.1.2 markdown 样式乱码

在这里插入图片描述

  • 修复方案参考文献:vue-element-admin Markdown 输出样式排版问题修复方案

1.1.3 修改默认尺寸

vue-element-admin是一套相当不错的后台管理UI框架, 默认字体尺寸是Medium。

但是实际情况,有时候我们可能期望修改默认尺寸为Mini
在这里插入图片描述
应该怎么办呢?

  • 修复方案参考:vue-element-admin 修改默认的全局字体尺寸为mini

1.1.4 当后端服务器宕机情况下页面加载层一直转圈无法停止,只能关闭页面

我们的前端项目中,访问一个 api 一般可能像这样

    getList() {this.listLoading = truefetchList(this.listQuery).then(response => {this.list = response.data.itemsthis.total = response.data.totalthis.listLoading = false})}

会造成this.listLoading = true 后,加载层打开,但是访问接口时候,
除非关闭页面或重新登录,否则页面加载层会一直转圈圈。

那么如何解决呢?

我们先来看下观察下 src/utils/request.js 中的关键内容处理如下:

...
/*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.data// if the custom code is not 20000, it is judged as an error.if (res.code !== 20000) {Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;if (res.code === 50008 || res.code === 50012 || res.code === 50014) {// to re-loginMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {confirmButtonText: 'Re-Login',cancelButtonText: 'Cancel',type: 'warning'}).then(() => {store.dispatch('user/resetToken').then(() => {location.reload()})})}return Promise.reject(new Error(res.message || 'Error'))} else {return res}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}...

当 catch到错误后,弹出了一个错误,并且执行了Promise.reject(error)

我以为这里已经处理过了,到具体的页面是无法感知到这个错误的,因此加载层也一直没找到修复方法,后来才发现修复方法也很简单,只需要优化 js 调用改成类似如下即可:

    getList() {this.listLoading = truefetchList(this.listQuery).then(response => {this.list = response.data.itemsthis.total = response.data.totalthis.listLoading = false}).catch(() => {this.loading = false})}
  • .then... .catch ...
    这是es 的回调基础语法,作为后端的我们,不是专业的前端,可能会不知道。。。

1.1.5 隐藏齿轮

如果想隐藏右侧的齿轮应该,怎么操作呢?
在这里插入图片描述

参考博文: 5. vue-element-admin 二次开发攻略指南


以后再遇到新的,再不定期更新到此文中,有需要的朋友可以点赞关注收藏一波。
未完待续,不定期更新。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/65273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零构建深度学习推理框架-11 Resnet

op和layer结构 在runtime_ir.cpp中,我们上一节只构建了input和output,对于中间layer的具体实现一直没有完成: for (const auto& kOperator : this->operators_) {if (kOperator->type "pnnx.Input") {this->input_o…

ssm+vue“魅力”繁峙宣传网站源码和论文

ssmvue“魅力”繁峙宣传网站源码和论文102 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm 摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身…

C语言:截断+整型提升+算数转换练习

详情关于整型提升、算数转换与截断见文章: 《C语言:整型提升》 《C语言:算数转换》 一、代码一 int main() { char a -1; signed char b -1; unsigned char c -1; printf("%d %d %d", a, b, c); return 0; } 求…

使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

现在已经有很多远程控制服务器的第三方软件平台,比如FinalShell,MobaXterm等,半可视化界面,使用起来非常方便和友好,两个系统之间传输文件直接拖就行,当然也可以使用命令方式在两个系统之间相互传递。 目录…

C++面试题(丝)-计算机网络部分(1)

目录 1计算机网络 53 简述epoll和select的区别,epoll为什么高效? 54 说说多路IO复用技术有哪些,区别是什么? 55 简述socket中select,epoll的使用场景和区别,epoll水平触发与边缘触发的区别?…

利用Cython发布python项目

最近有个python项目要发布,遇到了两个问题,一是项目在windows下运行有点慢,二是python都是脚本直接运行,没法保护代码安全。查了一下,有人说可以利用Cython,把python代码编译成为C来调用。即能提高运行性能…

使用 ElasticSearch 作为知识库,存储向量及相似性搜索

一、ElasticSearch 向量存储及相似性搜索 在当今大数据时代,快速有效地搜索和分析海量数据成为了许多企业和组织的重要需求。Elasticsearch 作为一款功能强大的分布式搜索和分析引擎,为我们提供了一种优秀的解决方案。除了传统的文本搜索,El…

linux上vim编辑器设置

linux上vim编辑器设置 减少tab缩进、显示行号等 在vimrc(一般在/etc/vim/vimrc中)末尾添加 set helplangcn "中文帮助文档(前提是下了中文包) syntax enable syntax on " 自动语法高亮 set number"显示行号 colorscheme desert" 设…

【两周学会FPGA】从0到1学习紫光同创FPGA开发|盘古PGL22G开发板学习之数码管动态显示(五)

本原创教程由深圳市小眼睛科技有限公司创作,版权归本公司所有,如需转载,需授权并注明出处 适用于板卡型号: 紫光同创PGL22G开发平台(盘古22K) 一:盘古22K开发板(紫光同创PGL22G开发…

Java-API简析_java.util.HashTable<K, V>类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/132522445 出自【进步*于辰的博客】 因为我发现目前,我对Java-API的学习意识比较薄弱…

http和https的区别?

什么是 HTTP? HTTP是一种互联网数据传输协议,用于在网络服务器和客户端之间进行数据传输。作为万维网的基础,HTTP协议允许网络浏览器向网络服务器发送请求,服务器则会返回响应。HTTP协议基于文本,因此传输的数据是人类…

41.岛屿数量(第四期模拟笔试)(BFS练习题)

题目: 给定一个 m 行 n 列的二维地图,初始化每个单元格都是海洋,二维地图外也全是海洋。 操作 addLand 会将单元格(col, row)变为陆地。 定义一系列相连的被海洋包围的陆地为岛屿, 横向相邻或者纵向相连的…

多线程下的signal信号处理

多线程中,信号在哪个线程中处理是不确定的,可能被任意一个线程处理 下边的代码可以验证该结论,多次Ctrlc,会被不同的线程捕获此信号,并处理,最终每个线程死锁,阻塞在等待锁的状态 #include &l…

微信小程序请求接口返回的二维码(图片),本地工具和真机测试都能显示,上线之后不显示问题

请求后端接口返回的图片&#xff1a; 页面展示&#xff1a; 代码实现&#xff1a; :show-menu-by-longpress"true" 是长按保存图片 base64Code 是转为base64的地址 <image class"code" :src"base64Code" alt"" :show-menu-by-long…

2023-09-02力扣每日一题

链接&#xff1a; 2511. 最多可以摧毁的敌人城堡数目 题意和解&#xff1a; 阅读理解题&#xff0c;要从1到-1或-1到1&#xff0c;中间只能有0&#xff0c;求最多能有多少0 实际代码&#xff1a; #include<bits/stdc.h> using namespace std; int captureForts(vect…

C#--sugarClient使用之ColumnName

使用Sugar ORM框架可以很方便地实现表名和实体名的映射&#xff0c;可以按照以下步骤进行操作&#xff1a; 创建一个实体类&#xff0c;定义实体的属性及其他信息。 [SugarTable("user_info")] // 指定实体对应的表名 public class User {public int Id { get; set…

Three.js实现模型,模型材质可拖拽效果 DragControls

Three.js提供了一个拖拽的API DragControls 用于实现模型材质拖拽效果 DragControls&#xff1a;是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。 DragControls的构造函数接受三个参数&#xff1a; objects&#xff1a;一个包含需要…

java中用HSSFWorkbook生成xls格式的excel(亲测)

SXSSFWorkbook类是用于生成XLSX格式的Excel文件&#xff08;基于XML格式&#xff09;&#xff0c;而不是XLS格式的Excel文件&#xff08;基于二进制格式&#xff09;。 如果你需要生成XLS格式的Excel文件&#xff0c;可以使用HSSFWorkbook类。以下是一个简单的示例&#xff1a…

C# textBox 右键菜单 contextMenuStrip

需求&#xff1a; 想在上图空白处可以右键弹出菜单&#xff0c;该怎么做呢&#xff1f; 1.首先&#xff0c;拖出一个 ContextMenuStrip。 随便放哪里都行&#xff0c;如下: 2.在textBox里关联这个“右键控件”即可&#xff0c;如下&#xff1a; 最终效果如下&#xff1a; 以上…

HTML <th> 标签

实例 普通的 HTML 表格,包含两行两列: <table border="1"><tr><th>Company</th><th>Address</th></tr><tr><td>Apple, Inc.</td><td>1 Infinite Loop Cupertino, CA 95014</td></tr…