Print Page - how to use vue-router router-view tag and Tabs component

Your Tabs component can be defined as:

Code:

<div class="main-body f-full f-column">
    <Tabs ref="tabs" class="f-full" @tabClose="onTabClose($event)">
      <TabPanel title="Home"></TabPanel>
      <TabPanel v-for="p in panels" :title="p.title" :closable="true" :key="p.title" bodyCls="f-column">
        <component :is="p.component" class="f-full"></component>
      </TabPanel>
    </Tabs>
</div>

When click on a menu, create a new TabPanel component.

Code:

onItemClick(item) {
  let index = this.panels.findIndex(p => {return p.title == item.text});
  if (index >= 0){
    this.$refs.tabs.select(index+1);
    return;
  }
  this.panels.push({
    title: item.text,
    component: item.component
  });
  this.$nextTick(() => {
    this.$refs.tabs.select(this.panels.length);
  })
},
onTabClose(panel){
  this.panels = this.panels.filter(p => p.title != panel.title);
}

EasyUI Forum

General Category => EasyUI for Vue => Topic started by: fengdie on August 17, 2018, 07:07:20 PM