Vue中通过按钮实现添加或删除表单中的某一块区域

1.需要实现的功能:

2.贴代码

<div>         <span class="from-title">项目配置</span>         <span class="el-icon-arrow-down" v-if="arrow" @click="changeArrow()"></span>         <span class="el-icon-arrow-right" v-else @click="changeArrow()"></span>         <div class="select-div" v-for="(dashaBoard, index) in dashBoardEdit.dashBoardData" v-if="arrow">           <span class="span--col">* </span>           <el-select v-model="dashaBoard.projectId" size="small"                      placeholder="请选择项目" style="width: 25%">             <el-option                 v-for="item in projectList"                 :key="item.value"                 :label="item.label"                 :value="item.value"             ></el-option>           </el-select>           <el-select v-model="dashaBoard.productKey" size="small"                      placeholder="请选择产品" style="width: 25%;padding-left: 10px">             <el-option                 v-for="item in productList"                 :key="item.value"                 :label="item.label"                 :value="item.value"             ></el-option>           </el-select>           <el-select v-model="dashaBoard.productCatId" size="small"                      placeholder="请选择" style="width: 25%;padding-left: 10px">             <el-option                 v-for="item in productType"                 :key="item.value"                 :label="item.label"                 :value="item.value"             ></el-option>           </el-select>           <el-button type="danger" icon="el-icon-delete" size="mini" circle                      @click="deleteCondition(index)" style="margin-left: 10px"></el-button>         </div>         <el-button v-if="arrow" plain size="mini" @click="addActionList" style="width: 80px;margin-top: 15px">添加项目         </el-button>       </div>   依次解释一下其中各个的用途: v-for(dashBoard ,index) in dashBoardEdit.dashBoardData  --->>翻译一下这句话就是,循环dashBoardEdit中的dashBoardData的对象,按照index(数组下标),依次放入这个div当中,dashaBoard作为形参代指dashBoardData dashaBoard.projectId  --->>这三个东西就是dashBoardData中内部的具体参数 deleteCondition(index) --->>这个就是删除,可以在新增,编辑时在页面同步实现,通过某个index就可以删除某一行的数据 addActionList() --->>这个就是添加一行 这个两个方法的内部实现: addActionList() {   this.dashBoardEdit.dashBoardData.push({}) } deleteCondition(index) {   this.dashBoardEdit.dashBoardData.splice(index, 1);//参数解释:从哪个参数开始,每次删除几个 }   主要是通过v-for遍历数组实现的.