vue中，从列表中选择一条数据，进行弹窗修改，如何实现最优雅？

Question

题目描述

列表中的数据，选中一条，点击修改，弹窗显示详情，可以进行修改，点击确定往后台传数据，点击取消关闭弹窗

Answer 1

1. 整个项目用了自己写的组件还是像 Element 或者 Vuetify 之类的组件库？如果是组件库，那么绑定一个数据就可以显示或隐藏弹框，不用 v-if（优雅了一点？）
2. 考虑使用 lodash 之类的库来进行 pick、clone、deepClone
3. 深拷贝的时机不需要通过 watch visible 来触发，点击“修改”按钮的时候就可以进行深拷贝
4. 时间处理可以在保存的时候进行，也不需要通过 watch 来触发

总而言之，在点击“修改”的时候准备数据，并修改绑定到弹框的数据来显示弹框，点击保存的时候保存数据、隐藏弹框
至于保存数据后或取消修改时，准备的数据是否要销毁，个人觉得可以不用销毁

Answer 2

我现在做的是在选中一行准备编辑的时候变量传递给弹窗组件.

在弹窗组件中mounted的时候我使用的JSON.parse(JSON.stringify(xxx))来进行深拷贝,虽然这样对于非通常对象,比如Date,File有问题,不过一般来说编辑的数据不会包含这样类型.这样比起Object.assign,如果数据包含数组或者嵌套对象,不会出现引用问题而误修改原数据.

弹窗组件只修改自己深拷贝过的值,提交和关闭都是传递给父级的事件,把之后的实际提交数据与实际关闭弹窗的动作都交由父级组件来完成.

这样子组件的功能就比较单纯,方便模块化.

Answer 3

嗯？这么复杂的么？时间控件每次变化的值不用记录，你只需要在用户点击“确定”按钮的时候，获取这个dateProp即可。整体功能实现其实没那么麻烦：
1.用户点击“修改”，showEditContainer(rowValue) 传入此行的所有值
2.在showEditContainer方法体内，先将rowValue格式化为你想要的格式（比如你说的时间格式要更改），然后填入对应编辑项。
3.用户编辑想要更改的项，点击“确定”按钮，你获取所有项的当前值（这里假定所有项用户都更改了比较简单），然后封装成后端想要的格式，发请求给后端即可。
4.关闭编辑框。

Answer 4

你说要用computed，但你并没有在你的代码中看到。
另外，watch有必要吗？

你弹出窗要的数据，点击事件的时候去修改就行了。