vue-elementui 项目，请教 V 友们几个表单类的问题

[unt]

请教大家几个表单的新增编辑问题： 表单结构是一个初始对象 A ，里面假设有 10 个 key ，这些数据是需要编辑和新增的。然后后端返回的数据是很多的，可能有 30 个 key ，想在编辑的时候把数据 set 进表单，比较简单的方法是 object.assign, 但是这样有个问题，就是我保存编辑的时候我不能直接去读表单数据，因为里面很多数据是不需要的，传给后端的话极大地增加了危险性，越少的数据越安全，甚至最好是仅传输改动的数据。 我目前的的做法是写了个过滤的方法，循环遍历，把后端返回的数据赋值给了初始对象 A ， 但是感觉有点傻。 也有优雅的写法，比如：(({ name, sex }) => ({ name, sex }))(source)，这个如何改成一个通用函数。

然后新增和编辑用同一窗口的话展示的内容也是不一样的， 如何优雅地进行控制。

综上：请问表单这块怎么做，一定要系统化，组件化，模式化（相当于是自己公司框架类的东西），单单针对一个页面去做是没有任何意义的。

[litchinn]

没理解到你的意思，不是双向数据绑定吗，为啥会需要手动 set ，新增编辑不同 v-if 就行了呀

[toesbieya]

第一个你写个工具类，页面里有定义的字段才从后端响应里取
第二个说实话，别这么搞，和低代码一样别人上手是要骂人的

[sjhhjx0122]

第一个写个过滤的方法，只能 set 跟表单一样的字段
新增和编辑用同一个为什么展示内容不一样，除了编辑要把数据反显进去，真不一样传个字段判断一下呗
好用的表单库 vue 上我还真没找到,可能 VeeValidate 符合你的需求？不过还是 ng 自带的表单库香啊

[GKD]

const Obj = {
key1: '1',
key2: '2',
key3: '3'
}
const UseKey = ['key1', 'key2']
const NewObj = {}
UseKey.map(item => {
NewObj[item] = Obj[item]
})
console.log(NewObj)

[unt]

@GKD #4 ....我知道，这个很简单，感觉太傻了

[Envov]

首先你需要一套可以描述表单 Ui 的数据结构，这里推荐 https://jsonforms.io/docs/renderer-sets/

其次，你服务端返回的数据中没有描述字段的类型，这里需要和服务端沟通，将数据的类型表达清楚

然后就是针对每个表单项目的值写适配器，包括新增时、编辑时,把值到 UI 的映射关系表单清楚

[nzbin]

每次看到表单问题我就忍不住想说，这用 angular 写的话简直就是分分钟啊。。。无论后端数据多复杂，直接 patchValue 给表单，然后通过表单得到的 value 只有绑定的字段，如果只想获取改动的字段检查 dirty 状态就行

[luvxy]

事件监听一下哪些字段呗修改了

[wellerman]

"因为里面很多数据是不需要的，传给后端的话极大地增加了危险性，越少的数据越安全，甚至最好是仅传输改动的数据。" 这个不应该在前端控制，数据安全和一次传多少数据到后端没关系。后端如果接收全部 Key 的更新，同时不对相应的 Key 做有效的过滤，前端哪怕不传数据，危险都是存在的。