Vue（五）基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 编辑修改弹窗与数据回显处理

目录

前言

编辑修改弹窗与数据回显处理

1. Vue前端 编辑修改弹窗图例

2. 编辑修改弹窗与数据回显处理 代码和实现分析

2.1 编辑修改弹窗 前端代码

2.2 弹窗数据回显 Script部分代码

前言

    基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 编辑修改弹窗与数据回显处理，快速带入已选择目标行所包含信息方便数据查看并修改操作，修改完成后调用修改接口后前端同步回显已修改内容。

编辑修改弹窗与数据回显处理

1. Vue前端 编辑修改弹窗图例

2. 编辑修改弹窗与数据回显处理 代码和实现分析

2.1 编辑修改弹窗 前端代码

<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
	<el-form label-width="70px">
		<el-form-item label="用户名">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
		<el-form-item label="地址">
			<el-input v-model="form.address"></el-input>
		</el-form-item>
	</el-form>
	<template #footer>
		<span class="dialog-footer">
			<el-button @click="editVisible = false">取 消</el-button>
			<el-button type="primary" @click="saveEdit">确 定</el-button>
		</span>
	</template>
</el-dialog>

2.2 弹窗数据回显 Script部分代码

// 定义列表数据，请求和加载过程
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	fetchData().then(res => {
		tableData.value = res.data.list;
		pageTotal.value = res.data.pageTotal || 50;
	});
};
getData();



// 表格编辑时弹窗和保存
const editVisible = ref(false);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.name = row.name;    // 获取并设置用户名
	form.address = row.address;    // 获取并设置地址
	editVisible.value = true;    // 展示弹窗
};
const saveEdit = () => {
	editVisible.value = false;    // 关闭弹窗

    // 这里插入调用修改接口api即可

	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].name = form.name;    // 修改前端列表数据用户名
	tableData.value[idx].address = form.address;    // 修改前端列表数据地址
};

参考原文代码地址如下：

https://gitcode.net/mirrors/lin-xin/vue-manage-system/-/blob/master/src/views/table.vue