关于vben+admin的表单联动编辑回显问题

这周有做一个需求,在测试环境跑的时候发现一个表单的回显问题。

需求背景:一个页面上有列表,通过列表的操作栏里的编辑来打开一个抽屉,抽屉里面是一个form表单。父选择框的options是由接口获得的,通过父选择框的onChange事件,将返回数据的children赋值给子组件的options,来渲染子选择框的options。在新增的时候流程很正常,编辑的时候也是正常的,但是!!!在我刷新页面第一次去编辑回显的时候会出现我将详情数据set给表单之后,子选择框的回显直接是value值,并不是我希望的label值。当时通过debugger发现在ts文件formSchems里的componentProps里面打印我想要的表单值,发现控制台打印的是一个proxy对象,

类似于这种,控制台能看到的只有我formShems表单项配置的defaultValue,但是在Target里面是有我编辑页面set进去的所有表单信息,当时想着这不很简单吗。直接.[属性]拿到再进行判断处理逻辑不就so easy了,但是还是太年轻。直接取报了个大大的undefined。然后试着用 vue的toRaw取,或者JSON的序列化,先string再Parse结果发现都不行。后来去网上找了一圈发现这是console.log的快照问题,console.log 会保留调用那一刻的快照,在之后如果修改了这个对象,就会出现控制台输出了快照的对象,但是点开对象看的时候对象已经被修改,导致两者不一致。原因就是我这个组件的form初始化的时候已经用默认的formSchems已经初始化过了,由于请求接口的ajax的异步问题,又往里面塞了一遍直接将表单数据改过了,所以我console.log出来的就是set之后的对象,但是我在执行的时候是取不到想要的属性导致后面的逻辑无法走下去进而导致我无法执行后面的set子选择框的options,所以会出现子选择框显示的是value值而不是映射到对于的label。类似于这种:

 当时想的就是一直在formSchems里面来做动作,并且由于表单配置是在ts文件当中,获取一些vue组件里的数据不是很方便。所以当时想了两个方案,一个是通过formSchems里的slot插槽在<template #***>里写组件逻辑,并且详情数据的接口返回值都是可以拿到的而且可以很方便的进行逻辑处理。但是这个ts的formSchems在别人那里也复用了,如果直接改formSchems里的配置估计会影响到其他人。另一个就是直接在vue文件里来改,不打算通过修改formSchems的配置来改了。既然这个bug是由于接口请求的时候异步的问题我再setFieldsValue时导致的,那我在接口请求接口之后获取到result的时候我再重新resetFormSchemas不就可以了吗,然后再useForm的源码当中果然找到了一个resetSchema,通过这个方法我再重新reset一下form表单的schemas,果然就可以了,并且不管是在刷新页面还是进行一些操作之后再进行编辑,这里都能完整拿到表单赋值之后的表单项。虽然这个bug解决了,但是还是有个问题不是很明白,为什么是每次刷新页面之后的第一次去编辑页面会出现这种情况,在编辑之后我再去别的列表项编辑子选择框是可以正常回显label值的,别的情况不会出现这个bug的原因难道是因为抽屉的关闭时会缓存数据?

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值