vue+elementui el-tabs根据条件动态增加

Question

现在标签页在写死的情况下，如何实现 标签的动态增加

点击择校意向中专业方向的添加按钮动态增加职业规划，比如现在专业方向是两个那么职业规划也是两个，职业规划中的内容是一样的

注：本人是后端开发，接手了别人的前端项目，前端水平半桶水，最好能写完整一点，就是拿到能用的

Answer 1

该回答引用ChatGPT

如有疑问可以回复我

你可以通过使用v-for指令和动态生成标签页的方法来实现标签页的动态增加。具体来说，你可以在data选项中定义一个数组来保存所有的标签页信息，然后在模板中使用v-for指令遍历这个数组，动态生成标签页和对应的内容区域。

下面是一个示例代码：

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name">
        <p>{{ tab.content }}</p>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="addTab">Add Tab</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      tabs: [
        { label: '前置信息', name: 'first', content: 'Content of the first tab' },
        { label: '动机', name: 'second', content: 'Content of the second tab' },
        { label: '学术背景及收获', name: 'third', content: 'Content of the third tab' },
        { label: '个人经历', name: 'four', content: 'Content of the fourth tab' },
        { label: '择校意向', name: 'five', content: 'Content of the fifth tab' }
      ]
    }
  },
  methods: {
    addTab() {
      const count = this.tabs.filter(tab => tab.name.startsWith('six_')).length + 1;
      const name = `six_${count}`;
      const label = `职业规划 ${count}`;
      const content = 'Content of the sixth tab';
      this.tabs.push({ name, label, content });
    }
  }
}
</script>

在这个示例代码中，我们定义了一个tabs数组，它保存了所有的标签页信息，包括标签的名称、显示的文本以及对应的内容。我们还定义了一个addTab方法，用于在点击添加按钮时动态添加一个标签页。这个方法会计算当前已经添加的职业规划的数量，然后使用一个以six_开头的名称来命名新的标签页，并将其添加到tabs数组中。

在模板中，我们使用v-for指令遍历tabs数组，动态生成标签页和对应的内容区域。每个标签页都由一个组件表示，它的label和name属性分别对应标签的显示文本和标签名称，content属性表示对应的内容。在模板中还添加了一个添加按钮，当点击这个按钮时，会调用addTab方法来动态添加一个新的标签页