1. 程式人生 > >ielement-ui實現動態新增刪除

ielement-ui實現動態新增刪除

需求如下,點選新增和刪除按鈕,實現月份,任務數的新增,點選刪除,刪除當前的任務


			<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)
      }