解决ant-design-vue中menu菜单无法默认展开的问题
在ant-design-vue的文档中,
menu有两个可以传的参数,分别为defaultOpenKeys和openKeys,但在接手做一个项目时,openKeys这个参数前人已经写了,可能是从文档中直接复制demo没有删除掉,我也没去管。
等到需要用到这个defaultOpenKeys的时候,想做每次刷新还会再次打开上次打开的菜单的效果,但一直无效,网上也没有查到有类似的情况,后面只能自己去看源码,查了一下,发现这个代码片段
这段代码不就说明了有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 }) }
在你添加表格数据的页面中注入reload
然后在添加数据的方法中引入this.reload() 即可
这样做,因为reload有强制当前页面刷新的功能
如果不需要页面重新刷新一遍,我们可以把提交的数据当作data传给后端。
这样表格提交后自动刷新。
以上这篇解决ant-design-vue中menu菜单无法默认展开的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决ant Design中Select设置initialValue时的大坑
我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转
-
ant design vue导航菜单与路由配置操作
此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select
-
原生Vue 实现右键菜单组件功能
Vue 原生实现右键菜单组件, 零依赖 快速安装 npm install vue-contextmenujs 使用 测试中使用的是 element-ui 图标 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); <template> <div id="app" style="width:100vw;height:100vh" @contextmenu
-
解决ant design vue中树形控件defaultExpandAll设置无效的问题
页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe
-
解决ant-design-vue中menu菜单无法默认展开的问题
在ant-design-vue的文档中, menu有两个可以传的参数,分别为defaultOpenKeys和openKeys,但在接手做一个项目时,openKeys这个参数前人已经写了,可能是从文档中直接复制demo没有删除掉,我也没去管. 等到需要用到这个defaultOpenKeys的时候,想做每次刷新还会再次打开上次打开的菜单的效果,但一直无效,网上也没有查到有类似的情况,后面只能自己去看源码,查了一下,发现这个代码片段 这段代码不就说明了有openKeys就不会有defaultOpenK
-
解决ant design vue 表格a-table二次封装,slots渲染的问题
目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&
-
Ant design vue中的联动选择取消操作
项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
-
ant design vue中日期选择框混合时间选择器的用法说明
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu
-
ant design vue中表格指定格式渲染方式
注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index
-
Ant Design Vue中的table与pagination的联合使用方式
目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用 表格table使用链接:ant desig
-
ant design vue 表格table 默认勾选几项的操作
为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR
-
解决ant Design中this.props.form.validateFields未执行的问题
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行,也没有报错. 原因: 我使用了自定义校验 validator ,在自定义校验方法中有个错误,使用了未定义的变量. 注意: 1.使用validator 时,注意自定义方法中是否有错误:对于如何解决没有错误提示,官网提示:可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获,
-
ant design vue datepicker日期选择器中文化操作
按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')&q
随机推荐
- SWT JFace Bookmark 制作
- python 循环while和for in简单实例
- javascript编程开发中取色器及封装$函数用法示例
- 快速理解MySQL中主键与外键的实例教程
- 基于jquery的文本框与autocomplete结合使用(asp.net+json)
- golang实现http服务器处理静态文件示例
- 深入多线程之:深入生产者、消费者队列分析
- Go语言编程入门超级指南
- PHP 脚本:随心所欲的代码逐渐流行
- PHP按行读取文件时删除换行符的3种方法
- 使用Android自定义控件实现滑动解锁九宫格
- 基于jquery的bankInput银行卡账号格式化
- 一道关于JavaScript变量作用域的面试题
- Android Handler的详细介绍
- Android 高仿斗鱼滑动验证码
- 仿网易新闻客户端头条ViewPager嵌套实例
- Android 自定义View时使用TypedArray配置样式属性详细介绍
- Java编程泛型限定代码分享
- JavaScript遍历求解数独问题的主要思路小结
- Android UI设计与开发之仿人人网V5.9.2最新版引导界面