Element: el-tab-pane does not take into account el-tabs from an other component

[Sancho66]

Hello Guys , I have a problem with your Tab element. I use your el-tabs in a my main component , but I can not use your el-tab-pane in other component like this :
My main component :

<el-tabs type="card" :closable="true">
<el-tab-pane label="User">User</el-tab-pane>
<tab-client name="Nouveau client"></tab-client>
</el-tabs>

Note : el-tab-pane "User" is good rendered

My template in tabClient component :

<template>
<div>
    <el-tab-pane label="Nouveau client">test</el-tab-pane>
 </div>
</template>

Note : The label of the tab is not displayed and is rendered as "<div class="el-tabs__item is-active"></div>" without none content.

I thinks el-tab-pane component include in other component does not take in account the el-tabs. Can you fix this issue ?
Thanks

[baiyaaaaa]

hi bro, it's not the desirable using way of the tabs component. why do u want to use this？

[Sancho66]

Indeed , I can insert my component into the el-tab-pane.

Other question : is it possible to set "closable" feature only at one el-tab-pane (and not at all ) ?

Thanks

[baiyaaaaa]

is it possible to set "closable" feature only at one el-tab-pane (and not at all ) ? yes, u can.

[NoahCardoza]

Out of curiosity why isn't this desirable? I feel that would be much more convenient since you could keep all of the tab configurations in one file. Is there any way around this without having to keep the el-tabs and el-tab-pane in one component?

[redoc123]

Would nt it be much organized if you render tabs in same file and componentize the tab content instead of doing this.

Sample of what I mean...

<el-tabs>
 <el-tab-pane v-for="(tab, index in tabs)" :key="index" :label="tab.label" name="tab.name">
   <component :is="tab.component" @bind="blah">
 </el-tab-pane>
</el-tabs>

??

[Erbenos]

While proposed way does work, I think it would make sense to add to documentation mention of the fact, that you can't use the way @Sancho66 is introducing.

[HY0606]

What did you do about it, buddy @Sancho66

[funder7]

<el-tabs>
 <el-tab-pane v-for="(tab, index in tabs)" :key="index" :label="tab.label" name="tab.name">
   <component :is="tab.component" @bind="blah">
 </el-tab-pane>
</el-tabs>

@redoc123

Thanks man! I wasn't aware of the component tag, this solution works great in my case, where I have some "static" panes, and others dynamic... I will render them like you suggested.

[M1CK431]

IMHO, the way @Sancho66 wants to make it works is a perfectly valid use case.

Looking at the code of this component, I see that el-tab-pane is getting the currently active tab using this.$parent.currentName (see here for details: https://github.com/ElemeFE/element/blob/059448bf7dee7200c3413cf9d4546fd442e63de7/packages/tabs/src/tab-pane.vue#L41) and so all you have to do to make it works is pass currentName as a prop of your component.

Example:
In Tabs.vue:

<template>
    <el-tabs v-model="activeTab">
        <Tab
          v-for="tab in tabs"
          :key="tab"
          :name="tab"
          :current-name="activeTab"
        />
    </el-tabs>
</template>

<script>
import Tab from 'somewhere';

export default {
  components: { Tab },
  props: { tabs: { type: Array, default: () => [''] } },
  data() {
    return { activeTab: this.tabs[0] };
  },
};
</script>

and in Tab.vue:

<template>
  <el-tab-pane :name="name" :label="name">
    Whatever you want
  </el-tab-pane>
</template>

<script>
export default {
  props: {
    name: { type: String, default: '' },
    // Here is the trick
    currentName: String
  },
}
</script>

However, the usage of this.$parent in this case is not the way to go, and Element should use provide/inject instead as explain here in Vue documentation: https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection

NB: It seems that even if el-pane-tab is now able to know if it is active or not, the "tab nav bar" is still broken.

NB2: el-tabs try to find it's el-pane-tab in it's default slot as direct children and check using the component name. See here for details: https://github.com/ElemeFE/element/blob/059448bf7dee7200c3413cf9d4546fd442e63de7/packages/tabs/src/tabs.vue#L60-L61

[kevrousso]

I would also like to be able to wrap the el-tab-pane in it's own component to keep configs in one place. Please reopen! @baiyaaaaa

[funder7]

@M1CK431 some time has passed, but I'm pretty sure that setting current-name property was not working right. Maybe I didn't try to set current-name, but only the v-model on el-tabs, what I remember is that dynamically loaded tabs were not updating the active tab when setting it programmatically!
That was in september '19, maybe with newer versions the behaviour is different, idk.