el-tabs添加多个增减按钮

### 实现 Element UI `el-tabs` 动态增删功能 为了在 `Element-UI` 的 `el-tabs` 组件中实现动态的标签页增删功能，可以利用 Vue.js 的响应式数据绑定特性以及 `el-tabs` 和 `el-tab-pane` 提供的相关 API 来完成此操作。 以下是具体的解决方案： #### 数据结构设计 通过定义一个数组来存储所有的标签页信息。每个标签页可以用对象表示，其中至少包含两个属性：`name`（唯一标识符）和 `title`（显示名称）。这些数据可以通过 Vue 的 `data()` 方法初始化[^1]。 ```javascript export default { data() { return { tabs: [ { name: 'tab1', title: 'Tab 1' }, { name: 'tab2', title: 'Tab 2' } ], activeName: 'tab1' }; } }; ``` #### 增加标签页逻辑 当点击新增按钮时，向 `tabs` 数组中追加一个新的标签项，并更新当前激活的标签为新创建的那个。这里需要注意的是每次添加的新标签应该具有唯一的 `name` 属性值。 ```javascript methods: { addTab(targetName) { const newTabName = ++this.tabIndex; this.tabs.push({ title: 'New Tab', name: 'newTab' + newTabName, content: 'New Tab Content' }); this.activeName = 'newTab' + newTabName; } } ``` #### 删除标签页逻辑 对于删除操作，则需判断是否要移除的是当前选中的标签；如果是的话，在执行删除动作之后还需要重新设置活动状态到剩余列表里的某一项上。为了避免意外清空全部选项的情况发生，可以在最后保留至少一个默认存在的 tab 页面不被关闭。 ```javascript removeTab(targetName) { let tabs = this.tabs; let activeName = this.activeName; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName && index !== 0) { activeName = tabs[index - 1].name; } else if (index === 0){ activeName = tabs.length >= 2 ? tabs[1].name : tabs[0].name ; } }); this.activeName = activeName; } this.tabs = tabs.filter(tab => tab.name !== targetName); } ``` #### HTML 结构部分 结合上述方法与模板语法构建视图层面上的表现形式，包括展示现有的 Tabs 列表及其对应的操作按钮等元素。 ```html <template> <div class="tabs-container"> <el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab"> <el-tab-pane v-for="(item, index) in tabs" :key="item.name" :label="item.title" :name="item.name"> {{ item.content }} </el-tab-pane> </el-tabs> <button style="margin-top: 20px;" @click="addTab">Add New Tab</button> </div> </template> ``` 以上代码片段展示了如何基于 `Element-UI` 的 `el-tabs` 构建一个多标签管理界面并支持基本的增删行为。