解决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 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
json的使用小结
Jun 08 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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中文乱码
2009/11/26 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python实现注册登录系统
2017/08/08 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
考试作弊检讨书
2014/10/21 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
图书馆义工感想
2015/08/07 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
redis限流的实际应用
2021/04/24 Redis
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers