ielement-ui實現動態新增刪除
阿新 • • 發佈:2019-01-09
需求如下,點選新增和刪除按鈕,實現月份,任務數的新增,點選刪除,刪除當前的任務
<div v-for="(item,index) in task_arr" class="agent-vlist"> <div class="agent-label">選擇月份</div> <div class="agent-value"> <el-select size="mini" v-model="item.month" placeholder="請選擇"> <el-option v-for="mitem in months" :value="mitem" > {{mitem}} </el-option> </el-select> </div> <div class="agent-label">選擇任務數</div> <div class="agent-value"> <el-input-number size="small" v-model="item.task_num" :min="1"></el-input-number> </div> <el-button type="success" size="mini" @click="add">新增</el-button> <el-button type="danger" size="mini" @click="delet(index)">刪除</el-button> </div>
data:()=>{
return {
months:[1,2,3,4,5,6,7,8,9,10,11,12],
task_arr:[
{
month:null,
task_num:1
}
]
}
},
methods 中新增add和delete方法
add(){ let obj = { month:null, task_num:1 } this.task_arr.push(obj) }, delet(index){ this.task_arr.splice(index,1) }