解决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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
js中switch case循环实例代码
Dec 30 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 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模板,主要想体现一下思路
2006/12/25 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python通过链接抓取网站详解
2019/11/20 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js