vue 组控件添加，删除

图形展示

html

<div style="display: flex;justify-content: space-between;">

                    <span>阈值设置</span>

                    <el-button style="float: left" @click="addsite()" type="text"  size="small">添加配置</el-button>

            </div>

            <div style="display: flex;justify-content: space-between;" v-for="(site,index) in sites">

                <div style="width: 100%">
                    <div >
                    <el-form-item label="详细配置" :label-width="formLabelWidthzk">
                            <el-input v-model="site.num"  placeholder="请写入次数" style="width: 210px"></el-input>
                    </el-form-item>
                    </div>

                </div>
                <div style="width: 100%">
                    <div>
                        <el-input v-model="site.numTime"  placeholder="请写入时间" style="width: 210px"></el-input>
                    </div>
                </div>
                <div style="width: 200%">
                        <el-select  v-model="site.timeCom" clearable placeholder="请选择时间单位">
                            <el-option label="秒" value=1></el-option>
                            <el-option label="分" value=2></el-option>
                            <el-option label="时" value=3></el-option>
                            <el-option label="日" value=4></el-option>
                        </el-select>
                </div>
                <div style="width: 150%">
                <el-button @click="deleteRowaq4s(index)" type="text"  size="small">删除</el-button>
                </div>
            </div>

<script>

addsite(){
    this.sites.push({'num':'','numTime':'','timeCom':''})
       },

deleteRowaq4s(index){
    this.sites.splice(index,1)
},

</script>

注意：要在data里面声明这个变量sites:[{'num':'','numTime':'','timeCom':''}],