vue多重输入

效果图

 

 <div class="block-box">
          <i class="iconfont icon-jia plus" v-if="!list.length" @click="addContent"></i>
          <el-row class="input-row" v-for="(item,index) in list" :key="index">
            <div class="copy_box">
              <el-form-item label="认证类型" prop="type">
                <el-radio-group v-model="item.marker_type">
                  <el-radio :label="1">头像</el-radio>
                  <el-radio :label="2">关注</el-radio>
                  <el-radio :label="3">粉丝</el-radio>
                  <el-radio :label="4">学习时长</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="认证名称">
                <el-input v-model="item.marker_name" placeholder="请输入认证名称" size="medium" class="input-detail"></el-input>
              </el-form-item>
              <el-form-item label="认证图标">
                <upload-imgs class="attestation_upload" ref="uploadEle" :max-num="maxNum" :value="item.attestation_initData" :rules="rules2" tag="attestation" :attestation_index="index" @getSendImg="getSendImg" />
              </el-form-item>
            </div>

            <div class="function">
              <i class="iconfont icon-jian1 minus" @click="removeContent(index)"></i>
              <i class="iconfont icon-jia plus" v-if="index === list.length-1" @click="addContent"></i>
            </div>
          </el-row>
        </div>

export default {
    data(){
        return{
            list:[
                {
                  marker_img: '',
                  marker_name: '',
                  marker_type: '',
                  attestation_initData: [],
                }
            ]
        }
    },
    methods:{
         addContent() {
      this.list.push({
        product_id: this.goodEditData.id,
        marker_img: '',
        marker_name: '',
        marker_type: '',
        attestation_initData: [],
      })
    },
    removeContent(index) {
      this.list.splice(index, 1)
    },
    }
}

.block-box {
  background: #f7f7f7;
  // padding: 20px;
  .plus {
    cursor: pointer;
    font-size: 24px;
    font-weight: 500;
    color: #3765b6;
  }

  .input-row {
    display: flex;
    justify-content: space-between;
    // width: 400px;
    // margin-bottom: 20px;

    .input-detail {
      width: 300px;
    }

    .function {
      display: flex;
      justify-content: space-between;
      width: 60px;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      margin-right: 25px;
      .iconfont {
        font-size: 24px;
        font-weight: 500;

        &.plus {
          color: #3765b6;
        }

        &.minus {
          font-size: 26px;
          color: #c7485b;
        }
      }
    }
  }
}

样式使用scss写的！

实现原理：

通过操作list数组！！！