vue循环添加输入框
循环添加效果如上图。上代码<el-form-item label="大区:" prop="formInline.gameArea" class="area"><!-- <el-input v-model="formInline.name" placeholder="请输入大区名称" style="width: 260px;" >&...
·
循环添加效果如上图。
上代码
<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)
},
更多推荐
已为社区贡献6条内容
所有评论(0)