elementui el-tabs动态增加表单

根据择校意向中专业方向的数量动态增加和删除左侧的职业规划，目前可以动态增加了但是增加的表单内容都一样互相影响

img

这是职业规划中的内容

img

应该是需要动态增加表单，但是我是做后端的前端不熟，希望能看到可以使用的代码

你怎么又发贴了？




<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form">
    <el-tabs v-model="activeName" @tab-click="handleClick" @tab-remove="handleRemove">
      <el-tab-pane v-for="(item, index) in form.intention" :key="index" :label="item.name" :name="index">
        <el-form-item label="职业规划" prop="plan">
          <el-input v-model="item.plan" autocomplete="off"></el-input>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      activeName: 0,
      form: {
        intention: [
          {
            name: '专业方向一',
            plan: ''
          }
        ]
      },
      rules: {
        plan: [
          { required: true, message: '请填写职业规划', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleRemove(targetName) {
      console.log(targetName)
    }
  }
}
</script>

该回答引用GPTᴼᴾᴱᴺᴬᴵ
如果你想要实现动态增加表单，但是表单之间不会互相影响，可以尝试以下步骤：

  1. 在你的 Vue 组件中，定义一个数组用于存储表单数据，例如：formList: []。
  2. 当需要增加表单时，向 formList 数组中添加一个新的表单对象。
  3. 在模板中使用 v-for 指令循环遍历 formList 数组，渲染出每个表单。
  4. 为每个表单绑定一个唯一的 key 属性，确保每个表单都有自己独立的状态。
  5. 在表单中需要绑定的数据属性中加上唯一标识符，例如 v-model="formList[index].value"。
  6. 在删除表单时，从 formList 数组中移除对应的表单对象。

以下是一个示例代码：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane v-for="(form, index) in formList" :key="form.id" :label="`表单 ${index + 1}`">
        <el-form :model="form" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input v-model="form.content"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="addForm">增加表单</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      formList: [],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addForm() {
      const newForm = {
        id: Date.now(),
        name: '',
        content: ''
      }
      this.formList.push(newForm)
      this.activeTab = this.formList.length - 1
    },
    removeForm(index) {
      this.formList.splice(index, 1)
    }
  }
}
</script>

在以上示例代码中，每个表单都有自己独立的状态，删除表单时只需要移除对应的表单对象即可。在表单中需要绑定的数据属性中加上唯一标识符，确保每个表单之间不会互相影响。

你的源码不贴一下，怎么知道具体逻辑呢？你这个主要问题就是对象没有唯一标识，导致互相影响。给所需的表单对象加一个索引值，就很容易区分开了，也可以结合ref_+n去识别