vue中form表單點擊一次添加一行

樣式

頁面代碼

<el-row v-for="(item, index) in courseInfo.daysArray">
	<el-form-item  label-width="50px">
		<el-col :span="1.5">
			<span style="font-family: 微軟雅黑;font-size:17px;font-weight:bold;">上課時間：</span>
		</el-col>
		<el-col :span="20">
			<el-select v-model="courseInfo.daysArray[index].day" filterable placeholder="請選擇上課日">
				<el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<span> - </span>
			<el-time-select v-model="courseInfo.daysArray[index].startTime" :picker-options="{start: '00:00', step: '00:10',end: '24:00'}" placeholder="選擇開始時間">
			</el-time-select>
			<span> - </span>
			<el-time-select v-model="courseInfo.daysArray[index].endTime" :picker-options="{start: '00:00', step: '00:10',end: '24:00'}" placeholder="選擇結束時間">
			</el-time-select>

			<el-button v-if="index!=0" style="margin-left: 5px" icon="el-icon-delete" @click="delDays(index)"></el-button>
			<el-button v-if="index == 0" style="margin-left: 5px" icon="el-icon-document-add" @click="addDays()"></el-button>
		</el-col>
	</el-form-item>
</el-row>

script部分的代碼

data() {
	return {
	 	courseInfo:{daysArray:[{}]},
	 	days:[{value:'星期一', label:'星期一'},{value:'星期二', label:'星期二'},{value:'星期三', label:'星期三'},{value:'星期四', label:'星期四'},
              {value:'星期五', label:'星期五'},{value:'星期六', label:'星期六'},{value:'星期日', label:'星期日'}],
	}
},
methods:{
	addDays() {
		this.courseInfo.daysArray.push({});
	},
	delDays(index){
		this.courseInfo.daysArray.splice(index, 1);
	},
}