解决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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
Javascript原型链及instanceof原理详解
May 25 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python如何省略括号方法详解
2020/03/21 Python
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
幼儿园辞职信
2015/05/13 职场文书
小孩不笨观后感
2015/06/03 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
周末问候语大全
2015/11/10 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Pytorch 实现变量类型转换
2021/05/17 Python