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

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

img

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

img

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

该回答引用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方法来动态添加一个新的标签页

没明白你哪里要动态？左侧的tab需要动态添加？还是tab对应右侧的内容需要动态添加

你可以将 专业方向和职业规划中展示的信息绑定成同一个变量，修改一个时另一个会自动改变

也可以将 专业方向和职业规划 绑定的变量放在他们两个标签公共的父级变量中，每次变动可以保持同时修改

参考GPT和自己的思路，你可以在择校意向中的添加按钮点击事件中动态添加一个新的职业规划标签页。具体步骤如下：

定义一个变量 tabs，用来存储标签页的列表，包括默认的标签页。

在 mounted 生命周期中，将默认的标签页添加到 tabs 中。

在 handleAddTab 方法中，根据当前的专业方向数量，循环添加对应数量的职业规划标签页。

在模板中，通过 v-for 循环渲染 tabs 数组，动态生成标签页。

下面是示例代码：

<template>
  <el-tabs v-model="activeName" tab-position="tabPosition">
    <el-tab-pane label="前置信息" name="first">...</el-tab-pane>
    <el-tab-pane label="动机" name="second"></el-tab-pane>
    <el-tab-pane label="学术背景及收获" name="third"></el-tab-pane>
    <el-tab-pane label="个人经历" name="four"></el-tab-pane>
    <el-tab-pane label="择校意向" name="five">
      <el-button @click="handleAddTab">添加职业规划</el-button>
      <el-tabs v-model="careerPlanActiveName" tab-position="top">
        <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name"></el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      careerPlanActiveName: '0',
      tabPosition: 'top',
      tabs: [
        { label: '职业规划1', name: 'six1' },
        { label: '职业规划2', name: 'six2' },
      ],
    };
  },
  mounted() {
    this.tabs.forEach((tab) => {
      this.$refs.careerPlanTab.addTab(tab);
    });
  },
  methods: {
    handleAddTab() {
      const majorCount = 2; // 假设当前专业方向数量为2
      for (let i = 1; i <= majorCount; i++) {
        const tab = { label: `职业规划${i}`, name: `six${i}` };
        this.tabs.push(tab);
        this.$refs.careerPlanTab.addTab(tab);
      }
    },
  },
};
</script>

在此更新的代码中，我们在“选择学校意向”选项卡中添加了一个按钮“添加职业规划”。 单击此按钮将调用“addCareerPlan”方法。 此方法将“careerPlans”数组设置为与“majorDirections”具有相同的长度，并将所有元素初始化为空字符串。

然后，它将活动选项卡设置为“职业规划”选项卡。 最后，我们更新了“职业规划”选项卡，以在“careerPlans”数组上使用 v-for 循环显示所有职业规划。 索引变量用于显示“专业方向”的数量。

给你一个参考思路：
可以在“择校意向”和“职业规划”选项卡的对应el-tab-pane组件中，分别定义一个数据属性，用于保存动态添加的input框的数量。然后，在模板中，可以使用v-for指令根据该数据属性的值动态渲染input框，并为每个input框绑定对应的“添加”和“删除”按钮的点击事件。

<el-tab-pane label="择校意向" name="five">
  <div v-for="(item, index) in schoolChoices" :key="index">
    <el-input placeholder="请输入择校意向"></el-input>
    <el-button @click="addSchoolChoice(index)">添加</el-button>
    <el-button @click="deleteSchoolChoice(index)">删除</el-button>
  </div>
  <el-button @click="addSchoolChoice(schoolChoices.length)">添加</el-button>
</el-tab-pane>
<el-tab-pane label="职业规划" name="six">
  <div v-for="(item, index) in careerPlans" :key="index">
    <el-input placeholder="请输入职业规划"></el-input>
    <el-button @click="addCareerPlan(index)">添加</el-button>
    <el-button @click="deleteCareerPlan(index)">删除</el-button>
  </div>
  <el-button @click="addCareerPlan(careerPlans.length)">添加</el-button>
</el-tab-pane>

在Vue实例中，需要定义相应的数据属性和方法

data() {
return {
schoolChoices: [0], // 初始状态下只有一个input框
careerPlans: [0], // 初始状态下只有一个input框
}
},
methods: {
// 择校意向相关方法
addSchoolChoice(index) {
this.schoolChoices.splice(index + 1, 0, this.schoolChoices.length)
},
deleteSchoolChoice(index) {
this.schoolChoices.splice(index, 1)
},
// 职业规划相关方法
addCareerPlan(index) {
this.careerPlans.splice(index + 1, 0, this.careerPlans.length)
},
deleteCareerPlan(index) {
this.careerPlans.splice(index, 1)
},
}

以上代码中，addSchoolChoice、deleteSchoolChoice、addCareerPlan和deleteCareerPlan分别是“添加”和“删除”按钮的点击事件处理函数，它们通过修改对应的数据属性（即schoolChoices和careerPlans）来实现动态添加和删除input框的功能。同时，在“择校意向”和“职业规划”选项卡对应的el-tab-pane组件中，也定义了一个额外的“添加”按钮，用于在当前已有的input框下方添加一个新的input框。

那你需要记录一下 专业方向的 信息 。比如 专业方向 填的内容 。然后 职业规划拿到它 。进行 遍历就行 。比如 专业方向 有两个 。那v-for 就循环两次