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