如何用 Element UI 的 Tabs 组件实现标签页的动态新增与移除【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element在 Element UI 中el-tabs默认渲染一组静态的el-tab-pane。当业务要求用户自己点按钮新增标签页、或点关闭按钮移除标签页例如多文档编辑页、会话管理面板时静态写法就不够用了。这篇文章给出两条基于官方文档的完整路径主路径用editable属性加edit事件一次性处理增删可选路径用addable/closable属性配合tab-add/tab-remove事件并支持自定义“增加标签页”的触发器。适用前提是 Vue 2 项目已通过 npm 或 CDN 引入 Element UI。准备条件安装与组件注册在 Vue 2 项目中通过 npm 安装npm i element-ui -S然后注册Tabs和TabPane两个组件。完整引入方式见 快速上手如果项目已有引入方式按需引入时确保下面两个组件都被注册import Vue from vue; import { Tabs, TabPane } from element-ui; Vue.use(Tabs); Vue.use(TabPane);注意样式文件需要单独引入如import element-ui/lib/theme-chalk/index.css;只引入组件不引入样式时卡片风格的标签页不会有正确的边框和关闭图标样式。核心思路用数据数组驱动标签页渲染动态增减的前提是把标签页从模板里的静态el-tab-pane改成v-for循环数据源是一个响应式数组。el-tabs的v-model绑定当前选中项的name因此每个 tab 对象必须包含唯一的name。官方文档对这一模式的完整示例见 Tabs 标签页 的“动态增减标签页”一节template el-tabs v-modeleditableTabsValue typecard editable edithandleTabsEdit el-tab-pane :keyitem.name v-for(item, index) in editableTabs :labelitem.title :nameitem.name {{item.content}} /el-tab-pane /el-tabs /template 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这段代码中有几个决定行为的关键点均来自文档的属性与事件说明typecard是硬性前提。文档明确写道“增减标签页按钮只能在选项卡样式的标签页下使用”即不带card风格时不会出现新增/关闭按钮。editable属性表示“标签是否同时可增加和关闭”默认false。设置后标签区会出现一个el-icon-plus的新增按钮每个标签上出现关闭图标。edit事件的回调签名是(targetName, action)点击新增按钮时action add且targetName为null某个标签被关闭时action remove且targetName是被删标签的name。所以上面用action分两个分支处理。新增逻辑this.tabIndex 生成自增且不重复的name把新对象 push 进editableTabs并把v-model指向的editableTabsValue设为新name使新标签页创建后立即处于选中态。移除逻辑里最容易踩的坑被移除的标签恰好是当前选中项时v-model还指向一个已不存在的name。文档示例的做法是在删除前把activeName切换到相邻标签优先取下一个tabs[index 1]否则取上一个tabs[index - 1]然后再用filter从数组中剔除目标项。删除非选中标签时editableTabsValue保持不变选中态不受影响。:keyitem.name让 Vue 在数组变化时正确复用和卸载 pane 实例避免增删后内容串位。关于name的默认值文档说明Tab-pane的name属性若未指定默认取该选项卡在列表中的顺序值第一个为1。动态场景下顺序值在增删后会变化所以务必显式传入唯一name这也是示例中v-model初始值2能稳定命中的原因。可选路径分离 addable / closable自定义增加触发器如果不想让用户点标签区自带的按钮而是用页面中一个独立的按钮或下拉菜单项来新增标签同时保留每个标签自己的关闭图标改用addable与closable两个独立属性它们默认均为falseaddable标签是否可增加closable标签是否可关闭。对应事件也分开tab-add点击 tabs 的新增按钮后触发无回调参数和tab-remove点击 tab 移除按钮后触发回调参数是被删除标签的name。Tabs 文档 的“自定义增加标签页触发器”示例展示了这种写法template div stylemargin-bottom: 20px; el-button sizesmall clickaddTab(editableTabsValue) add tab /el-button /div el-tabs v-modeleditableTabsValue typecard closable tab-removeremoveTab el-tab-pane :keyitem.name v-for(item, index) in editableTabs :labelitem.title :nameitem.name {{item.content}} /el-tab-pane /el-tabs /template 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: { addTab(targetName) { let newTabName this.tabIndex ; this.editableTabs.push({ title: New Tab, name: newTabName, content: New Tab content }); this.editableTabsValue newTabName; }, removeTab(targetName) { 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注意两点与主路径的差异这里的“新增”入口是外部el-button点击时手动调用addTab(editableTabsValue)——因为tab-add事件无回调参数文档示例把当前v-model值作为targetName显式传入方法。若确实要使用按钮需要加addable并监听tab-add。removeTab的相邻切换逻辑与主路径完全一致可以复用同一份实现。两条路径不要混用editable已同时覆盖增加与关闭再叠加addable/closable没有额外收益。验证结果是否生效本项目对这套行为有对应的单元测试位于 test/unit/specs/tabs.spec.js其中的断言可以作为你在页面上核对成功与否的依据以下为测试中的检查方式非固定输出移除验证editable用例初始渲染 3 个标签点击某个标签的关闭图标.el-icon-close后标签列表和el-tabs__content中的面板数量都应变为 2且当前选中标签带is-active类落在被删标签的相邻位置。新增验证点击.el-tabs__new-tab按钮后标签与面板数量应变为 3且新标签带is-active类。纯数据驱动验证dynamic用例不经过任何按钮直接向驱动数组tabspush 一个新对象后.el-tab-pane节点数量随之从 4 变为 5——说明v-for:key的绑定本身是通的。在没有测试环境的页面上可按同一标准手动核对点后新标签出现并被选中关闭非当前标签后选中项不变关闭当前标签后选中项落到相邻标签而不是停留在空白或回到第一个。组件侧的实现handleTabAdd发出edit(null, add)与tab-addhandleTabRemove发出edit(pane.name, remove)与tab-remove(pane.name)可参考 packages/tabs/src/tabs.vue用于确认事件参数与你代码中的接收方式一致。边界与限制新增/关闭按钮只在typecard下出现border-card和默认线条样式下均不显示。value / v-model默认值是第一个选项卡的nametab-position默认top与动态增删无关但标签位置变化后按钮位置会随之变化。Tab-pane还支持lazy标签延迟渲染和disabled禁用属性lazy适合内容较重的动态标签选中时才渲染disabled的标签在关闭图标点击处理中不会触发移除。若业务要求“某些标签不允许删除”用disabled是最贴合文档属性的做法。事件名和参数以文档表格为准tab-clicktab 被选中时触发回调为被选中 tab 实例、tab-remove回调为被删标签的 name、tab-add无回调参数、edit回调为(targetName, action)。若切换标签前还有未保存内容可另外使用before-leave钩子拦截切换返回false或返回被 reject 的 Promise 时切换被阻止这与动态增删正交可叠加使用。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 Element UI 的 Tabs 组件实现标签页的动态新增与移除？
如何用 Element UI 的 Tabs 组件实现标签页的动态新增与移除【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element在 Element UI 中el-tabs默认渲染一组静态的el-tab-pane。当业务要求用户自己点按钮新增标签页、或点关闭按钮移除标签页例如多文档编辑页、会话管理面板时静态写法就不够用了。这篇文章给出两条基于官方文档的完整路径主路径用editable属性加edit事件一次性处理增删可选路径用addable/closable属性配合tab-add/tab-remove事件并支持自定义“增加标签页”的触发器。适用前提是 Vue 2 项目已通过 npm 或 CDN 引入 Element UI。准备条件安装与组件注册在 Vue 2 项目中通过 npm 安装npm i element-ui -S然后注册Tabs和TabPane两个组件。完整引入方式见 快速上手如果项目已有引入方式按需引入时确保下面两个组件都被注册import Vue from vue; import { Tabs, TabPane } from element-ui; Vue.use(Tabs); Vue.use(TabPane);注意样式文件需要单独引入如import element-ui/lib/theme-chalk/index.css;只引入组件不引入样式时卡片风格的标签页不会有正确的边框和关闭图标样式。核心思路用数据数组驱动标签页渲染动态增减的前提是把标签页从模板里的静态el-tab-pane改成v-for循环数据源是一个响应式数组。el-tabs的v-model绑定当前选中项的name因此每个 tab 对象必须包含唯一的name。官方文档对这一模式的完整示例见 Tabs 标签页 的“动态增减标签页”一节template el-tabs v-modeleditableTabsValue typecard editable edithandleTabsEdit el-tab-pane :keyitem.name v-for(item, index) in editableTabs :labelitem.title :nameitem.name {{item.content}} /el-tab-pane /el-tabs /template 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这段代码中有几个决定行为的关键点均来自文档的属性与事件说明typecard是硬性前提。文档明确写道“增减标签页按钮只能在选项卡样式的标签页下使用”即不带card风格时不会出现新增/关闭按钮。editable属性表示“标签是否同时可增加和关闭”默认false。设置后标签区会出现一个el-icon-plus的新增按钮每个标签上出现关闭图标。edit事件的回调签名是(targetName, action)点击新增按钮时action add且targetName为null某个标签被关闭时action remove且targetName是被删标签的name。所以上面用action分两个分支处理。新增逻辑this.tabIndex 生成自增且不重复的name把新对象 push 进editableTabs并把v-model指向的editableTabsValue设为新name使新标签页创建后立即处于选中态。移除逻辑里最容易踩的坑被移除的标签恰好是当前选中项时v-model还指向一个已不存在的name。文档示例的做法是在删除前把activeName切换到相邻标签优先取下一个tabs[index 1]否则取上一个tabs[index - 1]然后再用filter从数组中剔除目标项。删除非选中标签时editableTabsValue保持不变选中态不受影响。:keyitem.name让 Vue 在数组变化时正确复用和卸载 pane 实例避免增删后内容串位。关于name的默认值文档说明Tab-pane的name属性若未指定默认取该选项卡在列表中的顺序值第一个为1。动态场景下顺序值在增删后会变化所以务必显式传入唯一name这也是示例中v-model初始值2能稳定命中的原因。可选路径分离 addable / closable自定义增加触发器如果不想让用户点标签区自带的按钮而是用页面中一个独立的按钮或下拉菜单项来新增标签同时保留每个标签自己的关闭图标改用addable与closable两个独立属性它们默认均为falseaddable标签是否可增加closable标签是否可关闭。对应事件也分开tab-add点击 tabs 的新增按钮后触发无回调参数和tab-remove点击 tab 移除按钮后触发回调参数是被删除标签的name。Tabs 文档 的“自定义增加标签页触发器”示例展示了这种写法template div stylemargin-bottom: 20px; el-button sizesmall clickaddTab(editableTabsValue) add tab /el-button /div el-tabs v-modeleditableTabsValue typecard closable tab-removeremoveTab el-tab-pane :keyitem.name v-for(item, index) in editableTabs :labelitem.title :nameitem.name {{item.content}} /el-tab-pane /el-tabs /template 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: { addTab(targetName) { let newTabName this.tabIndex ; this.editableTabs.push({ title: New Tab, name: newTabName, content: New Tab content }); this.editableTabsValue newTabName; }, removeTab(targetName) { 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注意两点与主路径的差异这里的“新增”入口是外部el-button点击时手动调用addTab(editableTabsValue)——因为tab-add事件无回调参数文档示例把当前v-model值作为targetName显式传入方法。若确实要使用按钮需要加addable并监听tab-add。removeTab的相邻切换逻辑与主路径完全一致可以复用同一份实现。两条路径不要混用editable已同时覆盖增加与关闭再叠加addable/closable没有额外收益。验证结果是否生效本项目对这套行为有对应的单元测试位于 test/unit/specs/tabs.spec.js其中的断言可以作为你在页面上核对成功与否的依据以下为测试中的检查方式非固定输出移除验证editable用例初始渲染 3 个标签点击某个标签的关闭图标.el-icon-close后标签列表和el-tabs__content中的面板数量都应变为 2且当前选中标签带is-active类落在被删标签的相邻位置。新增验证点击.el-tabs__new-tab按钮后标签与面板数量应变为 3且新标签带is-active类。纯数据驱动验证dynamic用例不经过任何按钮直接向驱动数组tabspush 一个新对象后.el-tab-pane节点数量随之从 4 变为 5——说明v-for:key的绑定本身是通的。在没有测试环境的页面上可按同一标准手动核对点后新标签出现并被选中关闭非当前标签后选中项不变关闭当前标签后选中项落到相邻标签而不是停留在空白或回到第一个。组件侧的实现handleTabAdd发出edit(null, add)与tab-addhandleTabRemove发出edit(pane.name, remove)与tab-remove(pane.name)可参考 packages/tabs/src/tabs.vue用于确认事件参数与你代码中的接收方式一致。边界与限制新增/关闭按钮只在typecard下出现border-card和默认线条样式下均不显示。value / v-model默认值是第一个选项卡的nametab-position默认top与动态增删无关但标签位置变化后按钮位置会随之变化。Tab-pane还支持lazy标签延迟渲染和disabled禁用属性lazy适合内容较重的动态标签选中时才渲染disabled的标签在关闭图标点击处理中不会触发移除。若业务要求“某些标签不允许删除”用disabled是最贴合文档属性的做法。事件名和参数以文档表格为准tab-clicktab 被选中时触发回调为被选中 tab 实例、tab-remove回调为被删标签的 name、tab-add无回调参数、edit回调为(targetName, action)。若切换标签前还有未保存内容可另外使用before-leave钩子拦截切换返回false或返回被 reject 的 Promise 时切换被阻止这与动态增删正交可叠加使用。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考