Element: 求教el-tabs 怎么动态的加载component

[zvrr]

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
  <el-tab-pane
    v-for="(item, index) in editableTabs"
    :label="item.title"
    :name="item.name"
  >
    {{item.content}}
  </el-tab-pane>
</el-tabs>
<script>
  export default {
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2
      }
    },
    methods: {
      handleTabsEdit(targetName, action) {
        if (action === 'add') {
          let newTabName = ++this.tabIndex + '';
          this.editableTabs.push({
            title: 'New Tab',
            name: newTabName,
            content: 'New Tab content'
          });
          this.editableTabsValue = newTabName;
        }
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }

          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      }
    }
  }
</script>

{{item.content}} 如果是是一个组件，比如点击左侧菜单，动态添加tab，tab里面的内容来自一个component，要怎么做呢？

[baiyaaaaa]

你可以用render fucntion来处理，item.content 作为组件的 vnode 传入。另外，问题是 vue 使用问题，应该到 vue 项目下提问，跟element无关，我先关掉了

[happyplus-chen]

怎么做？给个demo 谢谢！

[tt244213968]

三大坨代码，参考下吧
html：
<el-menu theme="dark" class="el-menu-demo" mode="vertical"> <el-submenu :index="String(index1)" :key="menu.name" v-for="(menu,index1) in menus"> <template slot="title">{{menu.primaryMenu}}</template> <el-menu-item @click="addTab(secondaryMenu,index2)" :index="String(index1 +'-'+index2)" :key="secondaryMenu.name" v-for="(secondaryMenu,index2) in menu.secondaryMenus">{{secondaryMenu.name}}</el-menu-item> </el-submenu> </el-menu>
<el-tabs v-model="TabsValue" type="card" closable @tab-remove="removeTab"> <el-tab-pane v-for="(item, index) in Tabs" :key="item.name" :label="item.title" :name="item.name"> <tab-component :index="index" :name="index"></tab-component> </el-tab-pane> </el-tabs>
data：
data() { return { menus: [ { primaryMenu: '第一级1', secondaryMenus: [{ name: '第二级1', component: Hello }, { name: '第二级2', component: Hello2 }] }, { primaryMenu: '第一级1', secondaryMenus: [{ name: '第二级1', component: Hello }, { name: '第二级2', component: Hello2 }] } ], TabsValue: '', Tabs: [], } }
function:
addTab(menu, index) { var exist = false for (var i = 0; i < this.Tabs.length; i++) { if (menu.name == this.Tabs[i].name) { exist = true break } } if (exist == true) { this.TabsValue = menu.name return } this.Tabs.push({ title: menu.name, name: menu.name, content: menu.component }) var _this = this Vue.component('tab-component', { render: function (h) { var comp = _this.Tabs[this.index].content return h(comp) }, props: { index: { type: Number, required: true } } }) this.TabsValue = menu.name }

[tqsq2005]

@zvrr 可以用动态组件, item.content 设定为相应的 component

<el-tab-pane
    v-for="(item, index) in editableTabs"
    :label="item.title"
    :name="item.name"
  >
    <component :is="item.content"></component>
  </el-tab-pane>

参见 Vue2-动态组件

[hcw2175]

@tqsq2005 确定这样是动态组件的用法？

个人认为这样用更好：

<el-tabs v-model="activeTabName">
  <el-tab-pane label="滤芯状态" name="ComponentName1"></el-tab-pane>
  <el-tab-pane label="服务记录" name="ComponentName2"></el-tab-pane>
  <el-tab-pane label="数据报表" name="ComponentName3"></el-tab-pane>
</el-tabs>

<component v-bind:is="activeTabName"></component>

直接在el-tab-pane外面动态渲染所需要的组件

[sunchenguang]

我就是这么弄的 @hcw2175

[marscj]

@hcw2175