html 将table中选中行的数据直接打印在表单中（一般在修改信息用到）

最新推荐文章于 2023-03-13 17:14:16 发布

原创最新推荐文章于 2023-03-13 17:14:16 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了如何在HTML中实现表格选中行数据到编辑表单的深拷贝。当点击编辑按钮时，通过深拷贝技术确保在弹出框中修改数据不会影响原始表格的内容。讲解了浅拷贝和深拷贝的区别，以及如何使用`Object.assign()`进行浅复制，并指出在需要独立修改副本时，深拷贝的必要性。

这是table表：

<el-table ref="multipleTable"  :data="page.list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="uname" label="用户名" width="120">
				</el-table-column>
				<el-table-column prop="uphone" label="手机号" width="120">
				</el-table-column>
				<el-table-column prop="uemail" label="邮箱">
				</el-table-column>
				<el-table-column prop="updateTime" label="最后修改时间">
				</el-table-column>
				<el-table-column prop="srole.rname" label="角色名">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="setRole(scope.$index, scope.row)">设置角色</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

点击编辑按钮出现弹出框：

<el-dialog title="修改角色信息" :visible.sync="dialogFormVisible2">
				<el-form :model="userForm" ref="userForm" label-width="100px" class="demo-editForm" >
					<el-form-item label="用户名" prop="uname">
						<el-input type="string" v-model="userForm.uname" ></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="uphone">
						<el-input type="string" v-model="userForm.uphone"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="uemail">
						<el-input type="string" v-model="userForm.uemail"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="dialogFormVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="doSetUserMsg">提交</el-button>
						<el-button @click="resetForm('userForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>

在编辑方法中设置，把选中行的数据传到弹出框中，在这卡主的原因是如果一个一个的赋值，在弹出框中就无法修改（斜杠隐去的），必须是整体传入：

handleEdit(index, row) {
			this.userForm = row;
			// this.userForm.uname = row.uname;
			// this.userForm.uphone = row.uphone;
			// this.userForm.uemail = row.uemail;
			this.dialogFormVisible2 = true;
		},
		//再次出现问题，修改弹出框的内容，table上的数据同步修改，并且点击取消也不会恢复

浅拷贝和深拷贝

浅拷贝：将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

深拷贝：创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

有时候希望在改变新的数组（对象）的时候，不改变原数组（对象）
例如：var newObj = obj; newObj.xxx = xxx 实际上，newObj和obj两个引用指向的是同一个对象，修改了newObj，也就等同于修改了obj。

Object.assign()实现浅复制。
合并之后所有被合并的对象和合并的对象都会变
如果目标对象中的属性具有相同的键，则它们将被源中的属性覆盖。后来的消息来源的属性将同样覆盖较早的属性。
代码如下：

handleEdit(index, row) {
			this.userForm = Object.assign({}, row);
				
			this.dialogFormVisible2 = true;
		},