Vue2使用iview中menu菜单组件的大坑！

在使用iview的menu组件时，当需要发送请求获取菜单，动态渲染组件的时候，会出现设置默认展开菜单无效的bug。

官网给出的方法如下

方法名说明参数

updateOpened 手动更新展开的子目录，注意要在 $nextTick 里调用无

updateActiveName 手动更新当前选择项，注意要在 $nextTick 里调用无

方法名	说明	参数
updateOpened	手动更新展开的子目录，注意要在 $nextTick 里调用	无
updateActiveName	手动更新当前选择项，注意要在 $nextTick 里调用	无

官网给出的方法不够具体，如果在vue2中使用，是需要考虑生命周期的问题。

重点：动态渲染的menu组件并设置初始展开的菜单时一定要在created生命周期中使用，因为在这个生命周期中DOM被渲染了但并未挂载到页面中产生实例，所以是获取不到DOM的，所以在这个生命周期后才可以对默认展开菜单进行赋值，并在watch中声明使用nextTick方法，将已经被ref绑定的menu进行侦听更新。

注意：在发送请求时，它的回调也要直接写在created生命周期中，不能写在methods中，而且用了async和await也不行，我觉得这是ivew一个天大的bug。

完整代码

<template><div class="layout"><Layout><Header><Menu mode="horizontal" theme="dark" active-name="1"><div class="layout-logo"></div><div class="layout-nav"><MenuItem name="1" style="font-size: 20px"> 后台管理系统 </MenuItem></div><divstyle="font-size: 20px;text-align: right;color: #fff;padding-right: 30px;"><el-dropdown><iclass="el-icon-user"style="margin-right: 15px; color: #fff; cursor: pointer"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item><span>退出</span></el-dropdown-item></el-dropdown-menu></el-dropdown>{{ username }}</div></Menu></Header><Layout><Sider hide-trigger :style="{ background: '#fff' }"><Menu:Ptheme="theme2":active-name="activeName":open-names="[openName]"width="auto"ref="sss"><MenuItem name="2-1" to=""><Icon type="ios-home-outline" />首页</MenuItem><Submenuv-for="(item, index) in navRouter":key="index":name="item.name"><template slot="title"><Icon :type="item.icon" />{{ item.name }}</template><MenuItemid="select"v-for="(child, key) in item.children":key="key":to="child.path":name="child.name">{{ child.name }}</MenuItem></Submenu></Menu></Sider><Layout :style="{ padding: '0 15px 15px' }"><Breadcrumb :style="{ margin: '10px 0' }"> </Breadcrumb><Content:style="{ Width: '100%', minHeight: '80vh', background: '#fff' }"><router-view></router-view></Content></Layout></Layout></Layout></div>
</template><script>
import { getMenu } from "@/api/menuApi";
export default {data() {return {theme2: "light",activeName: "", //打开的子标签openName: "", //打开的父标签名称username: "",navRouter: [],};},watch: {openName() {this.$nextTick(() => {//sss 是在menu组件绑定的this.$refs.sss.updateOpened();this.$refs.sss.updateActiveName();});},},async created() {//iview menu 动态渲染一定要在created这个声明周期中await getMenu().then((ret) => {//请求接口this.navRouter = ret.data;this.findOpenName(ret.data);});},methods: {findOpenName(data) {this.activeName = this.$route.name ? this.$route.name : "订单管理";data.forEach((element) => {element.children.forEach((item) => {if (item.name == this.activeName) {this.openName = element.name;}});});},   },
};
</script>
<style lang="sass" scoped>
*text-decoration: none
.ivu-layoutbackground: #eff2f5 !important.layoutwidth: 100%height: 100%.hwheight: 500pxwidth: 200px
</style>

Vue使用iview中menu菜单组件的大坑！相关推荐

vue使用iview中Upload上传组件
先上代码,注解在下面 html代码 <template> <Uploadmultiple action="Api/api/sys/fileController/upload ...
android中menu菜单扩增_【已解决】Android添加Menu菜单
[背景] 想要在Android中添加Menu菜单. 目前已经有了menu的xml定义了: /res/menu/activity_main.xml android:id="@+id/menu_ ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
vue中用table_Ant-Design-Vue中关于Table组件的使用
1. 如何自定义表格列头: Name const columns =[ { dataIndex:'name', // 自定义列表头,则不能设置title属性align:'left', slots: { ...
android中menu菜单扩增_在Android中的工具栏中添加菜单
菜单对于将多个动作放入其中非常有用,尤其是那些使用频率较低并且不需要自己的按钮的动作. 菜单显示在Android的工具栏上. 通常使用支持工具栏,但如果没有相应的类库,下面的方法也可以实现. 1.制作 ...
vue中用table_element-ui中的 table 组件在vue中的使用
经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉,通常它长下面这个样子: 但是我们可以使用使用 v-for 来优化模版中的 el-table-column v-for=& ...
Toolbar中menu菜单文字颜色的修改
Toolbar菜单中menu当中我们大多数都使用图片来按钮,可是有些时候我们也会直接使用文字,文字的颜色如何修改呢.其实很简单,我们只要修改styles.xml文件中,添加一句<item nam ...
vue element form中input等组件不能输入值
<el-input v-model="form.inputVal " /> 由于data中form只是一个空对象{},当主动设置 form.inputVal = &qu ...
vue cli 3中使用bootstra组件
1,安装插件 npm install jquery --save npm install bootstrap --save 2,在根目录中添加文件vue.config.js,然后写入下面配置 cons ...

Vue使用iview中menu菜单组件的大坑！

Vue2使用iview中menu菜单组件的大坑！

在使用iview的menu组件时，当需要发送请求获取菜单，动态渲染组件的时候，会出现设置默认展开菜单无效的bug。

官网给出的方法如下

官网给出的方法不够具体，如果在vue2中使用，是需要考虑生命周期的问题。

`注意：`在发送请求时，它的回调也要直接写在`created`生命周期中，不能写在`methods`中，而且用了async和await也不行，我觉得这是ivew一个天大的bug。

完整代码

Vue使用iview中menu菜单组件的大坑！相关推荐

最新文章

热门文章

Vue使用iview中menu菜单组件的大坑！

Vue2使用iview中menu菜单组件的大坑！

在使用iview的menu组件时，当需要发送请求获取菜单，动态渲染组件的时候，会出现设置默认展开菜单无效的bug。

官网给出的方法如下

官网给出的方法不够具体，如果在vue2中使用，是需要考虑生命周期的问题。

注意：在发送请求时，它的回调也要直接写在created生命周期中，不能写在methods中，而且用了async和await也不行，我觉得这是ivew一个天大的bug。

完整代码

Vue使用iview中menu菜单组件的大坑！相关推荐

最新文章

热门文章

`注意：`在发送请求时，它的回调也要直接写在`created`生命周期中，不能写在`methods`中，而且用了async和await也不行，我觉得这是ivew一个天大的bug。