一、修改按鈕

<el-button v-if="$route.meta.btns.updateBtn" size="mini" type="info" icon="el-icon-edit" @click="updateData">修改
</el-button>

二、建立修改的函式程式碼

updateData: function () {
    const rows = this.getSelectRows();
    if (rows.length !== 1) {
        this.$error("請選擇一行資料");
        return;
    }
    else {
        this.taskCode = rows[0].taskCode;
        this.jobTaskList = {...rows[0]};
        this.updateVisible = true;
    }
},

三、建立一個 el-dialog 的彈出框

<el-dialog
        title="修改"
        :visible.sync="updateVisible"
        v-if="updateVisible"
        width="60%"
       >
    <task-group-update ref="taskGroupUpdate" @refreshTable="search" @closeDialog="updateVisible = false" :updateUrl="updateUrl" :jobTaskList="jobTaskList"></task-group-update>
</el-dialog>

:jobTaskList="jobTaskList"   傳過去獲取的form表單

四、宣告變數，匯入模組

updateVisible: false,

import taskGroupUpdate from './taskGroupRefUpdate';

components: {taskGroupUpdate},

updateUrl: "/loan/jobTaskAction.do?_md=updateByTaskCode",

五、建立具體的程式碼

<template>
    <el-form ref="addForm" :rules="rules" :model="addForm" label-width="100px">
        <el-row type="flex" class="row-bg" justify="start">
            <el-col :span="12">
                <el-form-item label="工作組編碼" prop="taskCode">
                    <el-input v-model="addForm.taskCode">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="工作組名稱" prop="taskName">
                    <el-input v-model="addForm.taskName"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="start">
            <el-col :span="12">
                <el-form-item label="狀態" prop="status">
                    <elx-select v-model="addForm.status" selectKey="BTH_TASK_STATUS">
                    </elx-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="描述資訊" prop="remark">
                    <el-input v-model="addForm.remark"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <div align="center" style="margin-top: 15px;">
            <el-button type="primary" @click="onSubmit('addForm')">修改</el-button>
            <el-button type="danger" @click="onCancel">取消</el-button>
        </div>
    </el-form>
</template>
<script>
    export default {
        name: 'jobTaskUpdate',
        props: {
            updateUrl: String,
            jobTaskList: {}
        },
        data() {
            return {
                addForm: this.jobTaskList,
                disabled: false
            }
        },
        methods: {
            onSubmit() {
                const _this = this;
                this.$refs.addForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.$http.post(_this.updateUrl, _this.addForm)
                        .then((response) => {
                            if (response.success) {
                                _this.$success(response.msg);
                                _this.$emit('refreshTable');
                                _this.$emit('closeDialog');
                            } else {
                                _this.$error(response.msg);
                            }
                        })
                        .catch((error) => {
                            _this.$error(error.message);
                        });
                });
            },
            onCancel() {
                this.$success("已取消");
                this.$emit('closeDialog');
            }
        }
    };
</script>

1、props: { updateUrl: String, jobTaskList: {} },  接受傳過來的引數

2、 addForm: this.jobTaskList,   在return 中賦值接受form表單資料

3、 然後進行資料的又一次提交