vue中点击加减按钮，添加或删除一列输入框

最新推荐文章于 2024-11-28 10:54:35 发布

那是遇知吧

最新推荐文章于 2024-11-28 10:54:35 发布

阅读量1.7k

点赞数 2

分类专栏： VUE.js 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_41406727/article/details/120992220

版权

VUE.js 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<template>
    <el-form :model="form">
        <div v-for="(item,index) in form.addForm" :key="`addForm${index}`">
            <el-col :span="7">
                <el-form-item label="" :prop="`addForm.${index}.name`">
                    <el-input v-model="item.name" />
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="" :prop="`addForm.${index}.age`">
                    <el-input v-model="item.age" />
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="" :prop="`addForm.${index}.like`">
                    <el-input v-model="item.like" />
                </el-form-item>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="1" @click='deleteCol(index)'>-</el-col>
            <el-col :span="1" @click='addCol'>+</el-col>
        </div>
    </el-form>
</template>

 data(){
     return {
         form: {
            addForm : [
                {
                    name: '',
                    age: 0,
                    like: ''
                }
             ]
         }
     }
 }
 deleteCol(idx){
     if(this.form.addForm.length === 1){
         return alert('提示：必须填写一条')
     } 
     this.form.addForm.splice(idex,1)
 },
 addCol(){
     this.form.addForm.push({name: '',age:0,like:''})
 }