vue2实现动态添加、删除input框_vue 新增一条输入框带有删除-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70947033/article/details/131306193

该文章展示了一个Vue.js应用的代码片段，用于在用户界面动态新增和删除输入框。通过v-for指令遍历CropList数组，使用el-input组件创建可清除的输入框。同时，存在添加和删除按钮，分别通过addCropListbtn和deletecycle方法处理新增和删除操作，这些方法更新CropList的数据结构。此外，还有嵌套的子组件用于处理更复杂的周期性数据操作。

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


  <div class="center">
        <div class="title">新增xxx</div>
        <div class="fill">
            <el-input
        class="input"
         placeholder="例如xx"
         clearable
         v-for="(item,i) of CropList"  v-model="CropList[i].name" :key="i"
         >
        </el-input>
    <el-button class="gray" type="info" icon="el-icon-plus" @click="addCropListbtn"></el-button>
        </div>
    </div>
    <div class="center">
        <div class="title">新增xx周期</div>
        <div class="fill fill1">
            <div class="fill-center">
            <div  class="fill-center1" v-for="(item,i) of CropList"   :key="i">
            <el-button class="gray gray1">{{ CropList[i].name }}</el-button>
            
             <div class="fill-center2">
                <el-input
            class="input input1 gray1"
            placeholder="例如xxx"
            clearable
            v-for="(item2,index) of item.children" v-model="item2.name"  
            :key="index"
            >
            <i slot="suffix" v-if="deleteFalg==true" @click="deletecycle(i,index)"><img  :src="item2.img" alt="" srcset=""></i>
            </el-input>
            
            <el-button class="white whites" type="info" icon="el-icon-plus"
             @click="addCropcycleListbtn(i)"></el-button>
             </div>       
            </div>

            </div>
            
        </div>
    </div>

<script>
export default {
data(){
    return{  
        CropList: [],//新增xx           
    }
},
methods:{
deletecycle(i,index){ //删除xxx
this.CropList[i].children.splice(index,1)
},

addCropListbtn(){//新增xxxx
    this.CropList.push({
        name: "",// 父亲的name
        children: [{
            name: "",
            img:require('../../assets/cha.png')
        }]
    })

},
addCropcycleListbtn(index){//新增xxx儿子
    console.log(index,this.CropList);
    this.CropList[index].children.push({
        name: "",
        img:require('../../assets/cha.png')
    })

}
}
}
</script>

新增效果:
在这里插入图片描述

删除的效果: