如何使用MDB Vue动态创建标签页？含+按钮新增标签页实现问询

我之前刚好做过类似的需求，给你分享下具体的实现思路和代码示例，应该能帮你快速搞定这个功能！

核心思路 #

我们需要用一个数组来动态维护标签页的所有数据（比如标题、内容、唯一标识），点击+按钮时往数组里新增一条标签数据，同时把MDB的标签组件和这个数组做绑定，就能自动渲染出新的标签页了。

完整实现代码 #

模板部分 #

<template>
  <div class="container mt-4">
    <!-- 标签页头部 -->
    <MDBNav class="nav-tabs mb-3">
      <!-- 遍历渲染已有标签 -->
      <MDBNavItem v-for="tab in tabs" :key="tab.id">
        <MDBNavLink
          :active="activeTab === tab.id"
          @click="activeTab = tab.id"
        >
          {{ tab.title }}
          <!-- 可选：添加关闭按钮 -->
          <button 
            class="btn btn-close btn-sm ms-2"
            @click.stop="removeTab(tab.id)"
          ></button>
        </MDBNavLink>
      </MDBNavItem>
      <!-- 添加新标签的+按钮 -->
      <MDBNavItem>
        <MDBNavLink @click="addNewTab">
          <i class="fas fa-plus"></i>
        </MDBNavLink>
      </MDBNavItem>
    </MDBNav>

    <!-- 标签页内容区域 -->
    <MDBTabContent>
      <MDBTabPane
        v-for="tab in tabs"
        :key="tab.id"
        :show="activeTab === tab.id"
      >
        {{ tab.content }}
        <!-- 这里可以放你需要的自定义内容，比如表单、列表等 -->
      </MDBTabPane>
    </MDBTabContent>
  </div>
</template>

脚本部分 #

<script>
import { MDBNav, MDBNavItem, MDBNavLink, MDBTabContent, MDBTabPane } from 'mdb-vue-ui-kit';

export default {
  components: {
    MDBNav,
    MDBNavItem,
    MDBNavLink,
    MDBTabContent,
    MDBTabPane
  },
  data() {
    return {
      // 初始化一个默认标签
      tabs: [
        { id: 1, title: '首页', content: '这是首页标签的内容' }
      ],
      activeTab: 1, // 当前激活的标签ID
      tabCounter: 2 // 用于生成新标签的唯一ID，避免重复
    };
  },
  methods: {
    addNewTab() {
      // 创建新标签数据
      const newTab = {
        id: this.tabCounter,
        title: `新标签 ${this.tabCounter}`,
        content: `这是新标签 ${this.tabCounter} 的内容`
      };
      // 添加到标签数组
      this.tabs.push(newTab);
      // 自动切换到新创建的标签
      this.activeTab = newTab.id;
      // 计数器自增，保证ID唯一
      this.tabCounter++;
    },
    // 可选：标签关闭方法
    removeTab(tabId) {
      // 过滤掉要删除的标签
      this.tabs = this.tabs.filter(tab => tab.id !== tabId);
      // 如果删除的是当前激活的标签，切换到第一个标签或者最后一个
      if (this.activeTab === tabId) {
        this.activeTab = this.tabs.length > 0 ? this.tabs[0].id : null;
      }
    }
  }
};
</script>

关键细节说明 #

• 唯一ID生成：这里用了简单的计数器tabCounter，你也可以用Date.now()或者uuid库来生成更严谨的唯一标识，避免重复。
• 激活状态绑定：通过activeTab变量和标签的id做匹配，控制哪个标签处于激活状态，点击标签或者新增标签时更新这个变量即可。
• 关闭按钮（可选）：如果需要关闭标签的功能，添加一个小按钮，注意用@click.stop阻止事件冒泡，避免触发标签切换的事件。
• 自定义内容：标签内容区域（MDBTabPane）里可以放任何你需要的Vue组件或HTML内容，完全根据你的业务需求调整。

这样就能实现你想要的带+按钮的动态标签面板了，要是有样式调整或者其他功能扩展的需求，随时再琢磨～

内容的提问来源于stack exchange，提问作者Josh Winters