lljj-x / vue-json-schema-form

基于Vue/Vue3,Json Schema 和 ElementUi/antd/iview3/naiveUi 等生成 HTML Form 表单,用于活动编辑器、h5编辑器、cms等数据配置;支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3/naiveUi
https://form.lljj.me/
Apache License 2.0
2.06k stars 420 forks source link

在vue3中Array下面是Object并且至少有一项时,数据校验失败 #282

Closed zhangchuanbo closed 1 year ago

zhangchuanbo commented 1 year ago

反馈问题请先查看文档和务必提供详细的复现代码,遵循如下格式,描述不清楚的问题将会直接关闭。

vue和ui框架

vue3+elementplus

问题描述

在vue3中Array下面是Object并且至少有一项时,数据校验失败,页面上没有任何错误提示,但是数据提交保存时在控制台数据校验失败,并且只有数组的第一项校验失败

如何复现

{ "schema": { "type": "object", "required": [], "properties": { "array_1679552864531x0": { "title": "Array", "type": "array", "items": { "type": "object", "required": [ "string_1679552867847x0", "string_1679552870178x0", "string_1679552871778x0" ], "properties": { "string_1679552867847x0": { "title": "输入框", "type": "string", "ui:options": { "placeholder": "请输入" } }, "string_1679552870178x0": { "title": "输入框", "type": "string", "ui:options": { "placeholder": "请输入" } }, "string_1679552871778x0": { "title": "输入框", "type": "string", "ui:options": { "placeholder": "请输入" } } }, "ui:order": [ "string_1679552867847x0", "string_1679552870178x0", "string_1679552871778x0" ] }, "minItems": 1, "maxItems": 3, "uniqueItems": false } }, "ui:order": [ "array_1679552864531x0" ] }, "uiSchema": {}, "formFooter": {}, "formProps": { "layoutColumn": 3, "labelWidth": "100px", "labelSuffix": ":" } }

必要时提供复现demo,如codepen,github 复现仓库,playground分享链接等

https://form.lljj.me/v3/#/demo?type=Test&schema=%7B%22type%22%3A%22object%22,%22required%22%3A%5B%5D,%22properties%22%3A%7B%22array_1679552864531x0%22%3A%7B%22title%22%3A%22Array%22,%22type%22%3A%22array%22,%22items%22%3A%7B%22type%22%3A%22object%22,%22required%22%3A%5B%22string_1679552867847x0%22,%22string_1679552870178x0%22,%22string_1679552871778x0%22%5D,%22properties%22%3A%7B%22string_1679552867847x0%22%3A%7B%22title%22%3A%22%E8%BE%93%E5%85%A5%E6%A1%86%22,%22type%22%3A%22string%22,%22ui%3Aoptions%22%3A%7B%22placeholder%22%3A%22%E8%AF%B7%E8%BE%93%E5%85%A5%22%7D%7D,%22string_1679552870178x0%22%3A%7B%22title%22%3A%22%E8%BE%93%E5%85%A5%E6%A1%86%22,%22type%22%3A%22string%22,%22ui%3Aoptions%22%3A%7B%22placeholder%22%3A%22%E8%AF%B7%E8%BE%93%E5%85%A5%22%7D%7D,%22string_1679552871778x0%22%3A%7B%22title%22%3A%22%E8%BE%93%E5%85%A5%E6%A1%86%22,%22type%22%3A%22string%22,%22ui%3Aoptions%22%3A%7B%22placeholder%22%3A%22%E8%AF%B7%E8%BE%93%E5%85%A5%22%7D%7D%7D,%22ui%3Aorder%22%3A%5B%22string_1679552867847x0%22,%22string_1679552870178x0%22,%22string_1679552871778x0%22%5D%7D,%22minItems%22%3A1,%22maxItems%22%3A3,%22uniqueItems%22%3Afalse%7D%7D,%22ui%3Aorder%22%3A%5B%22array_1679552864531x0%22%5D%7D&uiSchema=%7B%7D&formFooter=%7B%7D&formProps=%7B%22layoutColumn%22%3A3,%22labelWidth%22%3A%22100px%22,%22labelSuffix%22%3A%22%EF%BC%9A%22%7D

期望的结果

....

zhangchuanbo commented 1 year ago

解决了,formdata配置数组第一项为空对象可解决

zhangchuanbo commented 1 year ago

希望可以优化数据校验,不配置formdata下的数组也可以正常校验

lljj-x commented 1 year ago

看起来是vue3 element 有问题的版本有问题 ,你是怎么配置为空解决的 ,可以给个playground ?

zhangchuanbo commented 1 year ago

看起来是vue3 element 有问题的版本有问题 ,你是怎么配置为空解决的 ,可以给个playground 就是直接在代码复制的时候,默认formdata为空对象 得{"arr":[{}]}这样就可以了。如果不给,虽然从表单获取到也是这样的值但是数据会校验失败

https://form.lljj.me/v3/#/demo?ui=VueElementForm&type=Test&schema={%22type%22:%22object%22,%22required%22:[],%22properties%22:{%22array_1679552864531x0%22:{%22title%22:%22Array%22,%22type%22:%22array%22,%22items%22:{%22type%22:%22object%22,%22required%22:[%22string_1679552867847x0%22,%22string_1679552870178x0%22,%22string_1679552871778x0%22],%22properties%22:{%22string_1679552867847x0%22:{%22title%22:%22%E8%BE%93%E5%85%A5%E6%A1%86%22,%22type%22:%22string%22,%22ui:options%22:{%22placeholder%22:%22%E8%AF%B7%E8%BE%93%E5%85%A5%22}},%22string_1679552870178x0%22:{%22title%22:%22%E8%BE%93%E5%85%A5%E6%A1%86%22,%22type%22:%22string%22,%22ui:options%22:{%22placeholder%22:%22%E8%AF%B7%E8%BE%93%E5%85%A5%22}},%22string_1679552871778x0%22:{%22title%22:%22%E8%BE%93%E5%85%A5%E6%A1%86%22,%22type%22:%22string%22,%22ui:options%22:{%22placeholder%22:%22%E8%AF%B7%E8%BE%93%E5%85%A5%22}}},%22ui:order%22:[%22string_1679552867847x0%22,%22string_1679552870178x0%22,%22string_1679552871778x0%22]},%22minItems%22:1,%22maxItems%22:3,%22uniqueItems%22:false}},%22ui:order%22:[%22array_1679552864531x0%22]}&formData={%22array_1679552864531x0%22:[{}]}&uiSchema={}&errorSchema={}&formFooter={%22show%22:true}&formProps={%22inline%22:false,%22labelPosition%22:%22top%22,%22inlineFooter%22:false,%22layoutColumn%22:1,%22labelWidth%22:%22100px%22}