vue项目中使用easeui的sideMenu和tabs 标签遇到的问题

 

实现功能: 点击左侧菜单,右侧标签页显示该菜单;

问题: 1.点击左侧菜单的时候,标签页不是显示当前菜单项; 

解决方法: 第一使用不知道easeUide tab页的select的使用方法.理解到select的使用方法后,给这个select方法传递一个当前打开的菜单在这个标签页的索引的位置就行了;但是这个select方法只能是这菜单已经打开了,首次打开的时候,还是不能切换到当前页;原因是因为这个select方法会先触发;加个定时器就能解决这个问题了

代码:

<div class="f-full layout-split-west">
        <div class="sidebar-body f-animate" :style="{width:width+'px'}">
          <div :class="[collapsed ? 'sidebar-user_unline' : 'sidebar-user']">
            <span v-if="!collapsed" > User Panel</span>
            <div class="panel-tool">
              <a href="javascript:;"  :class="[collapsed ? 'layout-button-right' : 'layout-button-left']"  @click="toggle()"></a>
            </div>
            <!-- <span class="main-toggle fa  fa-bars" @click="toggle()"></span>-->
          </div>
          <div class="subMenu">
            <SideMenu :data="menus" :border="false"  :collapsed="collapsed" @itemClick="onItemClick($event)"></SideMenu>
          </div>
        </div>
        <div class="main-body f-full f-row">
          <Tabs :scrollable="true" ref="tt"  style="width: 100%" @tabSelect="onTabClick($event)"  @tabClose="onTabClose($event)" v-model ='selected'>
            <TabPanel v-for="lang in languages" :key="lang.text" :title="lang.text" :closable="true">
              <div style="padding:20px" >
                <router-view/>
              </div>
            </TabPanel>
          </Tabs>
        </div>
      </div>

 /*点击左侧菜单*/
      onItemClick(item) {
        //判断tab标签页里面是否有这一项,如果没有就往里面添加,
        if(this.languages.indexOf(item)==-1){
          this.languages.push(item)
        }
       this.selected=this.languages.indexOf(item)
        //使用定时器是因为,标签的select方法只能是该标签页已经存在,当我第一打开的时候,这个标签页是不存在的,因此首次点击菜单时打开标签页的时候它默认显示不是当前页;   this.$refs.tt.select方法先触发,加上定时器让其延迟触发
        setTimeout(() => {
          this.$refs.tt.select(this.selected)
        }, 500);
        this.$router.push({
          path: item.url
        });


      },
      /*点击tab也触发的方法*/
      onTabClick(event){
        console.log("点击标签");
       console.log(event)
        var self=this
        this.languages.forEach(function (item,index) {
           if(item.text==event.title){
              self.$router.push({
              path:item.url
              });
           }
        })
      },
      /*关闭tab标签的方法*/
      onTabClose(val){
          /* console.log("删除")
           console.log(val)*/
        var self=this
        this.languages.forEach(function (item,index) {
          if(item.text==val.title){
          self.languages.splice(index,1)
          }

        })

 

转载于:https://www.cnblogs.com/xieli26/p/9811246.html