实现目标：点击新增和编辑按钮时出现同一个弹窗，但展示信息不同，分别对接新增和编辑接口。

直观效果：

前端页面中的新增和编辑按钮

点击新增按钮出现的弹框：

点击编辑出现的弹框：

新增和编辑均是通过确定按钮来对接接口。

后端swagger：

 

api下的js文件：

// 新增
export function insertMaterial(param) {
    return request({
        url: '/xxxx/xxxxx/insert',
        method: 'post',
        data: param,
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
    });
}
// 编辑
export function updateMaterial(param) {
    return request({
        url: '/xxxxx/xxxxx/update',
        method: 'post',
        data: param,
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
    });
}

 vue文件中：（弹窗、新增编辑按钮在同一个vue文件中）

先引入接口相关方法：

import { insertMaterial, updateMaterial } from '@/api/xxxx/index'

新增和编辑按钮的样式：template中

<div class="top-export">
			<el-button class="out-btn" @click="editAndAddMaterial()">
				<i class="el-icon-plus"></i>
				新增
			</el-button>
		</div>
		<div >
			<el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F0F4FC', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="100%">
				<el-table-column v-for="(item, index) in headArr" :key="index" :prop="item.prop" :label="item.label"> </el-table-column>
				<el-table-column prop="operate" label="操作">
					<template slot-scope="scope">
						<el-button @click="editAndAddMaterial(scope.row)" type="text" size="small" style="margin-right: 20px"> 编辑 </el-button>
						
					</template></el-table-column
				>
			</el-table>
		</div>

弹框样式（不在展开详细，只展示重要部分）：template中 

<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
    弹框内容
</el-dialog>

 data中：

tableData: [],
			headArr: [
				{ prop: 'xx', label: 'xxx' },
				{ prop: 'xxx', label: 'xxxx' },
				{ prop: 'xxxx, label: 'xxx' },
			],
			dialogVisible: false,
			dialogTitle: '',
			ifMaterialEdit: 0 // 0表示编辑，1表示新增

methods中：

// 弹窗确定按钮
		makeSure() {
			let params = {
				xxxx: this.tableData.xxx,
				xxxx: this.tableData.xxx,
				xxxx: this.tableData.xxx,
			}
			// 新增接口对接
			if (this.ifMaterialEdit == 1) {
				insertMaterial(params).then((res) => {
					if (res.data.code == 200) {
						this.tableData = res.data.data
						this.$message.success('新增成功')
						this.dialogVisible = false
						this.xxxx()  // 刷新页面
					} else {
						this.$message.warning('请稍后再试')
					}
				})
			} else if (this.ifMaterialEdit == 0) {
				// 编辑接口对接
				updateMaterial(params).then((res) => {
					if (res.data.code == 200) {
						this.tableData = res.data.data
						this.$message.success('编辑成功')
						this.dialogVisible = false
						this.xxxx()  // 刷新页面
					} else {
						this.$message.warning('请稍后再试')
					}
				})
			}
		}

// 新增和编辑按钮
		editAndAddMaterial(row) {
			if (row) {
				this.ifMaterialEdit = 0
				this.dialogVisible = true
				this.dialogTitle = '编辑'
				this.tableData = row
			} else {
				this.ifMaterialEdit = 1
				this.dialogVisible = true
				this.dialogTitle = '新增'
				this.tableData = {}
			}
		},

这样就实现了 同一个vue页面中新增和编辑两个功能共用一个弹窗和弹窗确定按钮并调用接口。若在需要父子组件的vue页面中实现这个功能，可参考：vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式_刚刚好ā的博客-CSDN博客_vue新增修改用一个窗口