iview中如何使subMenu默认选中项有效调试？

本文共计451个文字，预计阅读时间需要2分钟。

一、在iview中创建一个submenu组件，设置列宽为3列，使用flex布局，条件渲染，引用为menus，主题为浅色，默认激活项为0，选择菜单时触发selectMenu事件，宽度自适应，包含一个MenuGroup，为cid，遍历cids数组，使用index作为key，name为in。

一. 在iview中写一个submenu

<Col span="3" type="flex" v-if="showCids"> <Menu ref="menus" theme="light" active-name="0" @on-select="selectMenu" width="auto" > <MenuGroup title="cid"> <MenuItem v-for="(cid, index) in cids" :key="index" :name="index"> {{ cid }} </MenuItem> </MenuGroup> </Menu> </Col>

因为这个subMenu是动态生成的, 他的name我设置为动态生成过程中的index, 所以第一个subMenu的name是0.
根据上述设定, 参考官网的说明,使用activeName="0"来表示激活的name, 还特别注意力name是string而不是int基本数据类型. 所以就通过这种方式让subMenu0呈现激活态. 很好, 并不work下面是高能的踩坑过程, 如果不想看可以直接跳转 "三. 解决方法"

二. 踩坑全过程

根据网上的资料, 我迅速的发现了解决问题的路径. "因为subMenu是动态展开的"--->所以需要调用updateActiveName()方法, 在subMenu的数据填充之后进行调用. 然后我就根据网上的教程和iview官网的描述吭呲吭呲学了半个多小时. 因为在调用这个函数的时候我碰到了很多问题. 最重要的问题就是我根本找不到这个函数的调用入口, 说人话就是谁来调用这个函数. 教程上说是this.$refs.menu.updateActiveName(). 这行话含义就深了, 作为前端菜鸟根本把握不住. 首先refs是社么? 其次menu又是什么? 最后this.$nextTick() 为社么在这个函数里没有出现? 当然更新的新手会问this.$nextTick()是什么, 他为什么要在这里出现.
所以这个问题递归的层数真的够多的, 有多多呢? 看图吧.