使用el-tabs动态添加表单（数组形式）_el-tab-pane 下放表格-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45701630/article/details/122577678

本文介绍了一个用于管理专利信息的系统，该系统使用了Vue框架进行开发。用户可以通过此系统添加专利信息，包括专利名称、相关人员、所属单位、专利类型及附件等。系统还支持通过卡片式标签来管理每个专利项下的具体人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      <el-form-item label="成果专利">
        <el-button size="small" @click="addTab(editableTabsValue)" plain>
          点击添加
        </el-button>
      </el-form-item>
      <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" style="margin: 20px 40px;">
        <el-tab-pane
          v-for="(item, index) in releaseRuleForm.fjList"
          :key="item.fjIndex"
          :label="item.name == '' ? '附件' + (index + 1) : item.name"
          :name="item.fjIndex">
          <el-form-item label="名称" :prop="'fjList.' + index + '.name'">
            <el-input v-model="item.name"/>
          </el-form-item>
          <el-form-item label="人员" :prop="'fjList.' + index + '.user'">
            <!--<el-input v-model="item.user"/>-->
            <el-tag
              :key="tag"
              v-for="tag in item.users"
              closable
              :disable-transitions="false"
              @close="item.users.splice(item.users.indexOf(tag));handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="(dynamicTags.indexOf(inputValue) == -1 && inputValue) ? item.users.push(inputValue):'';handleInputConfirm()"
              @blur="(dynamicTags.indexOf(inputValue) == -1 && inputValue) ? item.users.push(inputValue):'';handleInputConfirm()"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">添加人员</el-button>
          </el-form-item>
          <el-form-item label="单位" :prop="'fjList.' + index + '.dept'">
            <el-input v-model="item.dept"/>
          </el-form-item>
          <el-form-item label="类型" :prop="'fjList.' + index + '.type'">
            <el-radio-group v-model="item.type">
              <el-radio
                v-for="it in cgTypeList"
                :label="it.dictLabel"
              />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="附件" :prop="'fjList.' + index + '.photo'">
            <ImageUpload v-model="item.photo"/>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      //动态添加专利信息表单
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.releaseRuleForm.fjList.push({
          fjIndex:newTabName,
          name:'',
          users:[],
          dept:'',
          depts:[],
          type:'',
          photo:'',
        })
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.releaseRuleForm.fjList;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.fjIndex === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.fjIndex;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.releaseRuleForm.fjList = tabs.filter((tab => tab.fjIndex !== targetName));
      },

添加成功后的数据

ruleForm:{
  name:'',
  fjList:[
    {
      name:'张三,李四',//后台要接受逗号分隔的数据
      users:['张三','李四'],
      dept:'单位1,单位2',
      depts:['单位1','单位2'],
      type:'专利',
      photo:'',    
    },
    {
      name:'王五,赵六',//后台要接受逗号分隔的数据
      users:['王五','赵六'],
      dept:'单位4,单位2',
      depts:['单位4','单位2'],
      type:'实用新型',
      photo:'',    
    }
  ]
}