在
Vue Element 中，可以使用 `el-
tabs` 组件来实现动态的
标签页增删，同时可以通过 `el-tab-pane` 组件来为每个
标签页传递不同的
Vue 组件。下面是一个简单的示例：
```
<template>
<div>
<el-
tabs v-model="activeTab">
<el-tab-pane
v-for="(item, index) in
tabs"
:key="item.name"
:label="item.label"
:name="item.name"
>
<component :is="item.component"></component>
</el-tab-pane>
</el-
tabs>
<el-button @click="addTab">Add Tab</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{
label: 'Tab 1',
name: 'tab1',
component: 'Component1',
},
{
label: 'Tab 2',
name: 'tab2',
component: 'Component2',
},
],
activeTab: 'tab1',
}
},
methods: {
addTab() {
const newTab = {
label: `Tab ${this.
tabs.length + 1}`,
name: `tab${this.
tabs.length + 1}`,
component: 'Component3',
}
this.
tabs.push(newTab)
this.activeTab = newTab.name
},
},
components: {
Component1: {
template: '<div>Component 1</div>',
},
Component2: {
template: '<div>Component 2</div>',
},
Component3: {
template: '<div>Component 3</div>',
},
},
}
</script>
```
在这个示例中，我们使用 `v-for` 指令来循环渲染每个
标签页。对于每个
标签页，我们使用 `el-tab-pane` 组件来渲染，其中 `:label` 属性用来设置
标签页的名称，`:name` 属性用来设置唯一的标识符，`:key` 属性用来帮助
Vue 识别这个组件。在
标签页的内容中，使用 `component` 组件来动态渲染不同的
Vue 组件。具体来说，我们使用 `:is` 属性来设置要渲染的组件类型，然后在组件内部使用相应的模板来渲染内容。
在 `addTab` 方法中，我们通过向 `
tabs` 数组中添加一个新的
标签页来实现动态增加。同时，我们将 `activeTab` 设置为新添加
标签页的 `name` 属性，以便在添加
标签页后自动切换到新添加的
标签页。
注意，上面的示例中，`Component1`、`Component2` 和 `Component3` 都是简单的组件，只是渲染了一些文本内容。在实际应用中，你需要根据实际情况来编写相应的组件，并将它们传递给
标签页。
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
