2018-2-24-vue的add添加代码

一、添加 button 按钮

<el-button v-if="$route.meta.btns.addBtn" size="mini" type="success" icon="el-icon-plus" @click="addVisible = true">新增
</el-button>

二、不要忘了在return 变量里声明

addVisible: false,

三、添加弹出框按钮

<el-dialog
        title="新增"
        :visible.sync="addVisible"
        v-if="addVisible"
        width="40%"
        >
    <task-ref-add ref="taskRefAdd" @refreshTable="refreshTable" @closeDialog="addVisible = false"/>
</el-dialog>

四、注意导入添加模块

import taskRefAdd from './taskGroupRefAdd';

components: {

taskRefAdd

}

五、新建的一个添加demo案例

<template>
    <el-form ref="addForm" :rules="rules" :model="addForm" label-width="150px">
                <el-form-item label="任务编码" prop="taskCode">
                    <el-input v-model="addForm.taskCode" placeholder="请输入任务编码">
                    </el-input>
                </el-form-item>
                <el-form-item label="任务名称" prop="taskName">
                    <el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <elx-select v-model="addForm.status" selectKey="BTH_TASK_STATUS">
                    </elx-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="addForm.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
        <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: 'taskGroupRefAdd',
        components: {},
        data() {
            return {
                addUrl: "/loan/jobTaskAction.do?_md=addJobTask",
                addForm: {},
                rules: {
                    taskCode: [
                        {required: true, message: '任务编码不能为空'}
                    ],
                    taskName: [
                        {required: true, message: '任务名称不能为空'}
                    ],
                    remark: [
                        {required: true, message: '标示不能为空'}
                    ]
                },
            }
        },
        methods: {
            onSubmit() {
                const _this = this;
                this.$refs.addForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.$http.post(_this.addUrl, _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、ref="addForm"  指的是当前节点对象，可以对整个form对象进行操作

2、:rules="rules" 指的是验证，很方便的呗

3、:model="addForm" 表单数据对象

4、 _this.$emit('refreshTable'); 调用上一个页面的刷新函数，回调呗

.........