vue中form表单点击一次添加一行
样式页面代码<el-row v-for="(item, index) in courseInfo.daysArray"><el-form-itemlabel-width="50px"><el-col :span="1.5">&...
·
样式
页面代码
<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);
},
}
更多推荐
已为社区贡献3条内容
所有评论(0)