解决ant-design-vue中menu菜单无法默认展开的问题


Posted in Javascript onOctober 31, 2020

在ant-design-vue的文档中,

解决ant-design-vue中menu菜单无法默认展开的问题

menu有两个可以传的参数,分别为defaultOpenKeys和openKeys,但在接手做一个项目时,openKeys这个参数前人已经写了,可能是从文档中直接复制demo没有删除掉,我也没去管。

等到需要用到这个defaultOpenKeys的时候,想做每次刷新还会再次打开上次打开的菜单的效果,但一直无效,网上也没有查到有类似的情况,后面只能自己去看源码,查了一下,发现这个代码片段

解决ant-design-vue中menu菜单无法默认展开的问题

这段代码不就说明了有openKeys就不会有defaultOpenKeys吗?

终于解开疑惑,可以继续愉快的敲代码了。

补充知识:ant design中table表格提交数据刷新问题

问题描述:在ant design 中table表格中添加一条新的记录,但是表格不刷新数据,第二次提交才刷新出第一条的数据。

解决方法:

在app.vue中写

provide(){
  return {
   reload: this.reload
  }

methods中:

reload() {
   this.isRouterAlive = false`在这里插入代码片`
   this.$nextTick(function () {
    this.isRouterAlive = true
   })
  }

解决ant-design-vue中menu菜单无法默认展开的问题

在你添加表格数据的页面中注入reload

解决ant-design-vue中menu菜单无法默认展开的问题

然后在添加数据的方法中引入this.reload() 即可

解决ant-design-vue中menu菜单无法默认展开的问题

这样做,因为reload有强制当前页面刷新的功能

如果不需要页面重新刷新一遍,我们可以把提交的数据当作data传给后端。

解决ant-design-vue中menu菜单无法默认展开的问题

这样表格提交后自动刷新。

以上这篇解决ant-design-vue中menu菜单无法默认展开的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 #Javascript
antd多选下拉框一行展示的实现方式
Oct 31 #Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 #Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 #Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 #Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 #Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 #Javascript
You might like
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
python模拟实现分发扑克牌
2020/04/22 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
考试不及格的检讨书
2014/01/22 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
早恋主题班会
2015/08/14 职场文书
班委竞选稿范文
2015/11/21 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
一级电子管军用接收机测评
2022/04/05 无线电
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL