我们来开发一下表格右侧的编辑按钮 ![](https://img.kancloud.cn/af/54/af54fe5a14e2e4c1074b2bb525c3f500_1622x951.png) ### ![](https://img.kancloud.cn/ed/8e/ed8e250316c013190ca93a241c9c76d5_1583x930.png) ### 如上图当中为什么要这么写呢？ 因为如果直接将passenger.value也就是模态框当中的表单数据设置为了record行数据的话，模态框字段改变的时候表格当中的数据也跟着改变 因为都是动态绑定的，所以我们得想办法让他们解绑 ### ![](https://img.kancloud.cn/9a/10/9a10010a51121a98cccba340350c8671_1846x1008.png) 我们新增这么一个工具类 其中就有对象复制 ![](https://img.kancloud.cn/70/94/70947b25dcb4f6a59c3f920bfde497bf_2824x1578.png) 代码如下： ![](https://img.kancloud.cn/a2/43/a243cdd648827e938271339404cc5f46_843x702.png) ### 这样就解决了模态框改变表格也跟着改变的问题 但是我们需要在index.html当中引入这个tool.js工具类 ![](https://img.kancloud.cn/77/13/7713b22965a51e6df619634d11bf1b3e_1311x912.png) ### 编辑功能就做好了 只需要回写数据到模态框 用户修改了之后还是会走模态框当中的handleOk事件便提交到了save接口 ![](https://img.kancloud.cn/46/e7/46e758a58d436857fd8dd20763abbd31_1152x524.png) ### 其实编辑的时候就已经拿到了整行的记录数据 ![](https://img.kancloud.cn/53/43/5343a0449d441fb25b82909cf6591d39_3322x950.png) ### 这样提交编辑ID也就带过去了 执行的是编辑功能