elementui el-table+el-input多行数据复制和删除

最新推荐文章于 2025-05-13 10:47:09 发布

原创最新推荐文章于 2025-05-13 10:47:09 发布 · 898 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

11 篇文章

订阅专栏

本文展示了如何使用Vue.js实现一个带有表格的对话框组件，用于课程安排的添加和编辑。表格中包含大纲标题、上课日期、开始时间和结束时间等字段，并提供了动态编辑和删除功能。用户可以编辑单元格内容，点击应用全部同步所有行的数据，或点击删除按钮移除特定行。此外，还提供了确认对话框以防止误操作。

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

效果图

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