js 前端保存数据

最新推荐文章于 2024-07-04 11:19:41 发布

Closure999

最新推荐文章于 2024-07-04 11:19:41 发布

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： javascript vue

本文链接：https://blog.csdn.net/Xiaoxiao_Zheng/article/details/110237759

版权

本文介绍了如何使用JavaScript和Vue实现一个表格，允许用户对每条数据进行单独的编辑、保存和删除操作。在编辑过程中，点击某一行进行编辑时，多选框变为可选，且同一时间只能编辑一条数据。当切换编辑项时，之前编辑的内容会恢复到原始状态。文章详细讲解了编辑逻辑和保存成功的处理方法，包括如何保留原始数据和释放缓存。

摘要由CSDN通过智能技术生成

页面实现效果

如图所示，一个table列表，对每一条数据进行单独修改，保存，删除；

需求：
1 点击编辑，多选框可选状态，每次只能点亮一条；
2 假如点击A1数据，A1变量，修改数据，但是未保存，再点击A2数据，A1数据显示修改之前的值；

代码实现

1 定义一个变量保存原始数据

curItem: {},//保存未修改的数据

2 编辑逻辑

onEdit(item) {
	for (let val of this.dataList) {
		val.isWorkRight = false;//控制按钮
		val.disabled = true;//控制复选框
		//用index 作为标识，将修改但是未保存的数据恢复
		if (val.index == this.curItem.index) {
			val.workRight = this.curItem.workRight;
			val.fileRight =