这是一个创建于 1394 天前的主题，其中的信息可能已经有所发展或是发生改变。
请教大家几个表单的新增编辑问题： 表单结构是一个初始对象 A ，里面假设有 10 个 key ，这些数据是需要编辑和新增的。然后后端返回的数据是很多的，可能有 30 个 key ，想在编辑的时候把数据 set 进表单，比较简单的方法是 object.assign, 但是这样有个问题，就是我保存编辑的时候我不能直接去读表单数据，因为里面很多数据是不需要的，传给后端的话极大地增加了危险性，越少的数据越安全，甚至最好是仅传输改动的数据。 我目前的的做法是写了个过滤的方法，循环遍历，把后端返回的数据赋值给了初始对象 A ， 但是感觉有点傻。 也有优雅的写法，比如：(({ name, sex }) => ({ name, sex }))(source)，这个如何改成一个通用函数。
然后新增和编辑用同一窗口的话展示的内容也是不一样的， 如何优雅地进行控制。
综上：请问表单这块怎么做，一定要系统化，组件化，模式化（相当于是自己公司框架类的东西），单单针对一个页面去做是没有任何意义的。
 | 1 litchinn 2022 年 6 月 29 日 没理解到你的意思，不是双向数据绑定吗，为啥会需要手动 set ，新增编辑不同 v-if 就行了呀 |
 | 2 toesbieya 2022 年 6 月 29 日 via Android 第一个你写个工具类，页面里有定义的字段才从后端响应里取 第二个说实话，别这么搞，和低代码一样别人上手是要骂人的 |
 | 3 linkopeneyes 2022 年 6 月 29 日 第一个写个过滤的方法，只能 set 跟表单一样的字段 新增和编辑用同一个为什么展示内容不一样，除了编辑要把数据反显进去，真不一样传个字段判断一下呗 好用的表单库 vue 上我还真没找到,可能 VeeValidate 符合你的需求？不过还是 ng 自带的表单库香啊 |
 | 4 GKD 2022 年 6 月 29 日 const Obj = { key1: '1', key2: '2', key3: '3' } const UseKey = ['key1', 'key2'] const NewObj = {} UseKey.map(item => { NewObj[item] = Obj[item] }) console.log(NewObj) |
 | 6 Envov 2022 年 6 月 29 日 首先你需要一套可以描述表单 Ui 的数据结构，这里推荐 https://jsonforms.io/docs/renderer-sets/ 其次，你服务端返回的数据中没有描述字段的类型，这里需要和服务端沟通，将数据的类型表达清楚 然后就是针对每个表单项目的值写适配器，包括新增时、编辑时,把值到 UI 的映射关系表单清楚 |
 | 7 nzbin 2022 年 6 月 29 日 每次看到表单问题我就忍不住想说，这用 angular 写的话简直就是分分钟啊。。。无论后端数据多复杂，直接 patchValue 给表单，然后通过表单得到的 value 只有绑定的字段，如果只想获取改动的字段检查 dirty 状态就行 |
 | 8 luvxy 2022 年 6 月 30 日 事件监听一下哪些字段呗修改了 |
 | 9 wellerman 2022 年 6 月 30 日 "因为里面很多数据是不需要的，传给后端的话极大地增加了危险性，越少的数据越安全，甚至最好是仅传输改动的数据。" 这个不应该在前端控制，数据安全和一次传多少数据到后端没关系。后端如果接收全部 Key 的更新，同时不对相应的 Key 做有效的过滤，前端哪怕不传数据，危险都是存在的。 |
Select Language