鞠彗云 发表于 2026-1-30 21:50:00

关于antd前端组件a-select组件选择无效的问题处理记录

在使用公司的信息系统时,偶然发现一个下拉组件选择无效,于是看一下前端页面的代码。
前端页面是基于ant Design vue组件开发,JS代码如下,主要用于获取当前登录用户所属的组织机构列表和默认的组织机构
//获取用户信息
const userInfo = tool.data.get('USER_INFO')
//获取用户归属的组织机构列表(有多个)
const orgs = userInfo.orgs   
//获取默认的组织机构
let myOrgId = userInfo.orgs && userInfo.orgs.length ? userInfo.orgs.orgId : 0下面是下拉选择的控件代码,用于选择当前登录帐号关联的部门列表
                        
                  </a-form-item>当前登录帐号有2个部门可以选择,但是选择后,选中的部门没有变化,还是原来的值。
看上面的代码,没有看出哪里有问题,于是就很奇怪,用change事件记录了一下选择是否有变化,发现change事件传的value是有变化的,但是变量myOrgId是没有变化的。以前也遇到过这个问题,但是原因是绑定值的变量类型与选项列表的值的变量类型不一致的问题。
这次看了一下代码,我发现,这里定义变量没有使用ref()不是引用类型的,于是将定义变量代码改为以下代码
let myOrgId = ref(userInfo.orgs && userInfo.orgs.length ? userInfo.orgs.orgId : 0)变量定义的代码改了之后,发现问题解决了。后面使用myOrgId变量时,需要使用myOrgId.value获取值。
总结一下,选择无效的原因可能有两个
1、绑定值的变量类型与选项列表的值的变量类型不一致。
2、值类型变量定义时没有使用ref()来定义。
问题解决了,在此记录一下。

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

峰襞副 发表于 2026-2-1 16:20:55

懂技术并乐意极积无私分享的人越来越少。珍惜

思矿戳 发表于 2026-2-4 04:08:37

不错,里面软件多更新就更好了

拼潦 发表于 2026-2-7 01:47:42

谢谢分享,试用一下

蝙俚 发表于 2026-2-8 12:50:19

谢谢分享,辛苦了

恿榫 发表于 2026-2-9 11:40:05

过来提前占个楼

任佳湍 发表于 2026-2-9 19:04:47

新版吗?好像是停更了吧。

锄淫鲷 发表于 2026-2-11 10:22:26

鼓励转贴优秀软件安全工具和文档!

向梦桐 发表于 2026-2-11 10:56:57

前排留名,哈哈哈

颐港 发表于 2026-2-12 06:35:04

很好很强大我过来先占个楼 待编辑

杼氖 发表于 2026-2-20 12:40:33

感谢,下载保存了

瘴锲如 发表于 2026-2-21 05:30:05

这个好,看起来很实用

晚能 发表于 2026-2-21 06:40:06

感谢分享,下载保存了,貌似很强大

热琢 发表于 2026-3-7 09:03:21

谢谢分享,试用一下

豌笆 发表于 前天 23:28

很好很强大我过来先占个楼 待编辑

郗新语 发表于 昨天 00:17

收藏一下   不知道什么时候能用到
页: [1]
查看完整版本: 关于antd前端组件a-select组件选择无效的问题处理记录