element-ui 爬坑指南-vue

el-form

label-width

• 已知：在el-tabs...el-tab-pane中嵌入了el-form并且把label-width设置了auto，报错[ElementForm]unpected width
• 解决：form的labelWidth是auto时，遇到v-if，beforeDestroy时会报错

tabClick(tab) {
  if (tab.name == "detaillist") {
    // form的labelWidth是auto时，遇到v-if，beforeDestroy时会报错
    // [ElementForm]unpected width
    this.labelWidth = "auto";
    ...
  } else {
    this.labelWidth = "100px";
  }
},

即可。

也就是当tab隐藏时给labelWidth设置一个固定值

el-menu

navMenu 动态菜单

顶部一级，左侧二级菜单。点击顶部菜单动态显示左侧二级菜单列表（二级菜单含有下级菜单，采用el-menu

设置路由模式 <el-menu router ...>

设置:default-active="$route.path"，切换一级菜单时二级菜单有时不高亮解决办法：

• 给el-menu 设置ref="menu"
• 在设置完菜单列表时动态改变ref的activeIndex

this.$nextTick(() => {
    // 更navmenu的active状态
    this.$refs.menu.activeIndex = this.$route.path;
});

即可。