2018-8-24-vue更新项目update的代码

一、修改按钮

<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、 然后进行数据的又一次提交