vue循环添加输入框

循环添加效果如上图。

 

上代码

 <el-form-item label="大区:" prop="formInline.gameArea" class="area">
       <!-- <el-input v-model="formInline.name" placeholder="请输入大区名称" style="width: 260px;" ></el-input><img src="@/assets/add.svg" width="35px" height="35px">-->

          <el-row
            v-for="(item, index) in formInline.gameArea"
            :key="'gameArea' + index">
            <el-col :span="20">
              <el-form-item>
                <el-input style="width: 260px;" placeholder="请输入大区名称" v-model="item.area_name"></el-input>
                <img v-if="index == 0" src="@/assets/add.svg" width="35px" height="35px" @click="pushHomeHot(formInline.gameArea)">
                <el-button v-if="index >0" type="text" @click="delHot(formInline.gameArea, index)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
      <!--{{formInline.gameArea}}-->
      </el-form-item>

      <el-form-item label="段位:" prop="formInline.gameLevel" class="wrap">
       <!-- <el-input v-model="formInline.name" placeholder="请输入段位名称" style="width: 260px;" ></el-input>-->
        <el-row
          v-for="(item, index) in formInline.gameLevel"
          :key="'gameLevel' + index">
          <el-col :span="20">
            <el-form-item>

              <el-upload
                class="avatar-uploader"
                :action=uploadUrl
                :show-file-list="false"
                :on-success="handleAvatarSuccessList"
                :before-upload="beforeAvatarUpload"
                :objectBind="index"
                >
                <img v-if="item.imageUrlList" :src="item.imageUrlList"  class="avatarList">
                <i v-else class="el-icon-plus avatar-uploader-icon-list"></i>
              </el-upload>

              <el-input style="width: 260px;" placeholder="请输入段位名称" v-model="item.level_name"></el-input>
              <img v-if="index == 0" src="@/assets/add.svg" width="35px" height="35px" @click="pushLevel(formInline.gameLevel)">
              <el-button v-if="index >0" type="text" @click="delHot(formInline.gameLevel, index)" style="color: deepskyblue">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
       <!--{{formInline.gameLevel}}-->
      </el-form-item>

 

增加以及删除的事件

 pushHomeHot(list) {
        list.push({})
      },
      pushLevel(list) {
        list.push({
          level_name:'',
          imageUrlList:'',
          cover:''
        })
      },
      // 删除热门服务项的方法
      delHot(list, index) {
        list.splice(index, 1)
      },