网站建设难吗,网站设计欣赏中国,网站即将 模板,软件技术是什么专业一、业务场景#xff1a; 最近在使用Vue框架和antd-vue组件库的时候#xff0c;发现在做编辑回显时** TreeSelect 树型选择控件** 组件的选中的值能拿到#xff0c;但是在下拉列表的回显位置有偏差。为了大家后面遇到和我一样的问题#xff0c;给大家分享一下
二、bug信息…一、业务场景 最近在使用Vue框架和antd-vue组件库的时候发现在做编辑回显时** TreeSelect 树型选择控件** 组件的选中的值能拿到但是在下拉列表的回显位置有偏差。为了大家后面遇到和我一样的问题给大家分享一下
二、bug信息
三、问题原因 点击下拉框的时候值可能没获取到所以会默认显示在数据的中间
四、解决方案 在延时器中 自己手动获取到选中的样式 然后滚动到所选的值上面
五、代码部分
HTML部分a-form-model-item propcontentOfDept span slotlabel 单位选择/spana-tree-selectclickscollViewshowSearchallowClearchangeValChanv-modelform.contentOfDepttreeNodeFilterProptitle:dropdownStyle{ maxHeight: 400px, overflow: auto }:dropdownMatchSelectWidthtrue:replace-fieldsreplaceFields:treeDatadeptsplaceholder请选择:treeDefaultExpandAlltrue/a-tree-select/a-form-model-item
JS部分scollView(){setTimeout((){// 点击下拉框后定位到选中的值const labelHt document.getElementsByClassName(ant-select-tree-node-selected)[0]console.log(labelHt)labelHt?.scrollIntoView({behavior: auto,block: center,inline: center,});},100)},六、效果展示
你已经成功了撒花。 今天的分享到此结束欢迎小伙伴们一起交流
