vue中form表单点击一次添加一行

最新推荐文章于 2024-07-08 17:24:26 发布

原创最新推荐文章于 2024-07-08 17:24:26 发布 · 1w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Vue.js框架创建的课程时间表编辑器，它允许用户通过选择上课日、开始时间和结束时间来轻松地安排课程。该编辑器支持添加和删除课程时间段，为教育机构和学生提供了一个直观的课程管理解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式

在这里插入图片描述

页面代码

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