效果图![](https://i-blog.csdnimg.cn/blog_migrate/9d72626a5f13b52387b13ef2c8467f81.png)
<el-dialog title="添加/编辑" :visible.sync="dialogFormVisible" @opened="opendDialogForm()" @close='closeDialog'>
<el-form :model="formData" :rules="rules" ref="formData" label-width="100px" >
<el-form-item label="课程安排">
<div class="item-wrap">
<div class="flex item flexcenter flexbetween outline-header">
<el-table :data="formData.outline" style="width: 100%">
<el-table-column prop="date" label="序号" width="60">
<template slot-scope="scope">
第{{scope.$index +1}}讲
</template>
</el-table-column>
<el-table-column prop="outline_title" label="大纲标题" >
<template slot-scope="scope">
<el-input v-model="scope.row.outline_title" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column prop="course_day" label="上课日期" width="150">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.course_day"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="start_time" label="开始时间" width="150">
<template slot-scope="scope">
<el-time-picker
v-model="scope.row.start_time"
type="time"
placeholder="选择时间" value-format="HH:mm:ss" >
</el-time-picker>
</template>
</el-table-column>
<el-table-column prop="end_time" label="结束时间" width="150">
<template slot-scope="scope">
<el-time-picker
v-model="scope.row.end_time"
type="time"
placeholder="选择时间" value-format="HH:mm" >
</el-time-picker>
</template>
</el-table-column>
<el-table-column prop="end_time" label="结束时间" width="120">
<template slot="header" slot-scope="scope">
<el-button size="middle" type="success" @click="applyCourseData">应用全部</el-button>
</template>
<template slot-scope="scope">
<el-button size="middle" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('formData')">确 定</el-button>
<el-button @click="dialogFormVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<script>
var my = new Vue({
el: "#myApp",
data: {
dialogFormVisible: false,
formData: {
id: 0,
class_name: '',
school_id:'',
teacher_uid: '',
class_type: '1',
course_id: '',
grade_id: '',
outline: [
{
id: 0,
outline_title: '',
course_day: '',
start_time: '',
end_time: '',
}
]
},
rules: {
},
},
methods: {
applyCourseData(){
var that = this;
this.$confirm('应用全部项, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for (var i = 1; i< that.formData.outline.length ; i++){
that.formData.outline[i]['outline_title'] = that.formData.outline[0]['outline_title'];
that.formData.outline[i]['course_day'] = that.formData.outline[0]['course_day'];
that.formData.outline[i]['start_time'] = that.formData.outline[0]['start_time'];
that.formData.outline[i]['end_time'] = that.formData.outline[0]['end_time'];
this.$set(that.formData.outline, 'outline_title' ,that.formData.outline[1])
}
}).catch(() => {
});
},
handleDelete(index,item){
console.log(item)
var that = this;
this.$confirm('删除后不能恢复, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.get(Url({a:'delCourse' , q:{id:item.id}})).then(res => {
this.$message({
message: res.data.msg,
type: res.data.code === 200 ? 'success' : 'error',
})
});
that.formData.outline.splice(index,1);
}).catch(() => {
});
}
},
mounted(){
this.doLoadRows()
}
});
</script>