在Vue CLI3项目使用iView的Tree组件时，遇到菜单展开异常的问题。通过官方文档，尝试用open-names绑定展开菜单的名称，但实际操作中发现即使数据绑定正确，菜单切换后仍有子菜单无法自动展开。经过排查，问题出在使用v-if控制菜单显示，导致菜单被销毁。将v-if改为v-show后，菜单能正确保持展开状态，解决了问题。
vue-cli3项目 用ivew组件库的tree组件时遇到的菜单展开问题
根据官网上说的,只需要将每个需要展开的菜单命名,然后用open-names将要展开的菜单的名称写在后面的数组里即可,
如图所示:
2. 在各种排查后,可以确定数据的绑定也就是命名也是正确的,然后菜单的展开却有问题,我项目中在网页的头部也就是header中(工作台 学生管理 开课管理 .....部分)点击时改变数组中的值结合v-if来控制左侧菜单的显示与否,当首次打开网页时所有的菜单都展开了,但问题是:当我点击header中去切换过菜单后,就有子菜单没有展开了,不好描述直接上图吧,下图是当我进入网页点击系统设置后的左侧菜单的展开图,(正常的效果应该是菜单权限管理也展开的)但实际却没有.
正确的应该是下图所示的,但是只有在点击菜单权限管理后才会展开,很明显,点击后就触发了Tree组件的点击事件才展开的,而我要的效果是我打开网页的时候就展开的,如图:
排除了数据绑定的错误,官方给的样例也证明用open-names 可以将命名正确的菜单都展开,所以不应该出现我遇到的问题才对.
最后找了很久的bug,解决方法:
将控制菜单<menu> 在v-if 换成v-show,由于当我点击切换header中(工作台 学生管理 开课管理 .....部分)menu菜单中有些菜单的show会被赋值为false,如果用v-if 的话,会将menu销毁,导致的问题. 当我吧控制menu的v-if 换成v-show后无论header中(工作台 学生管理 开课管理 .....部分)怎么切换,都是正常展开了.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
