前端与后端联调接口之----新增和修改功能---在同一个弹框

import request from "../http";//引的是axios的二次封装
 
//新增和修改共用同一个接口
export function addOrEdit(data) {
    return request({
        url:"/api/addOrEdit",
        method:"post",
        data:data
    })
}

//获取详情的接口
export function getDetail(data) {
    return request({
        url:"/api/getDetail",
        method:"post",
        data:data
    })
}

上面是接口文件，下面我们来写父组件的页面

<template>
    <div>
        <el-button @click="handleClick">新增</el-button>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClickEdit(scope.row.id)" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 因为新增和修改时数据需要实施更新，我们还要在DialogAddOrEdit
             这个组件上加一个方法，因为我这的数据不是真实的接口数据，所以
             我们就在这块写，根据需求来添加@refsh = "getList"
        -->
        <DialogAddOrEdit ref="DialogAddOrEditRef" v-if="DialogAddOrEditFlag"></DialogAddOrEdit>
    </div>
</template>
  
<script>
import DialogAddOrEdit from "./DialogAddOrEdit"
export default {
    components:{DialogAddOrEdit},
    data() {
        return {
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            DialogAddOrEditFlag:false,
        }
    },

    methods: {
        init(){
           this.DialogAddOrEditFlag = true;
        },
        handleClick() {
           this.DialogAddOrEditFlag = true;
           this.$nextTick(()=>{
            this.$refs.DialogAddOrEditRef.init();
           })
        },
        handleClickEdit(id){
           this.DialogAddOrEditFlag = true;
           this.$nextTick(()=>{
              this.$refs.DialogAddOrEditRef.init(id);
           })
        }
    }
}
</script>

接下来是子组件的弹框----新增和修改功能

<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { getDetail , addOrEdit} from "./api";
export default {
    name: "DialogAddOrEdit",
    data() {
        return {
            dialogFormVisible: false,
            form: {
                id: null,
                name: '',
                address: '',
                title: "",
            },
            formLabelWidth: '120px',
            tableDetail: {},
        };
    },
    methods: {
        init(id) {
            if (id != null) {
                this.getDetails(id)
                this.form.id = id;
                this.form.title = `编辑`;
            }
            else {
                this.form.title = `新增`;
                this.dialogFormVisible = true
            }
        },
        // 这种获取详情显示是通过后端给的接口显示的
        getDetails(id) {
            const params = {
                data: { id: id },
            }
            getDetail(params).then((data) => {
                if (data.result) {
                    this.tableDetail = data.resultdata
                    this.form.name = data.resultdata.name
                    this.form.address = data.resultdata.address
                    this.dialogFormVisible = true
                }
            })
        },
        submitForm() {
            const param = {
                id: this.tableDetail.id,
                name: this.form.name,
                address: this.form.address,
            }
            if (this.form.title === `编辑`) {
                addOrEdit(param).then((data) => {
                    this.init();
                    this.$emit(`refsh`)
                    this.dialogFormVisible = false;
                })
            }
            else if (this.form.title === `新增`) {
                const params = {
                    name: this.form.name,
                    address: this.form.address,
                }
                addOrEdit(params).then((data) => {
                    this.init();
                    this.$emit(`refsh`)
                    this.dialogFormVisible = false;
                })
            }
        },
        cancel () {
        this.dialogFormVisible = false;
        this.form = {
          name: ``,
          address: ``,
        };
      },
    }
};
</script>

上面代码需要根据你自己的需求来进行修改