TreeSelect 树型选择控件 编辑回显时所选的值与展开后的数据不对应 解决方案

一、业务场景:
最近在使用Vue框架和antd-vue组件库的时候,发现在做编辑回显时** TreeSelect 树型选择控件** 组件的选中的值能拿到,但是在下拉列表的回显位置有偏差。为了大家后面遇到和我一样的问题,给大家分享一下

二、bug信息:
在这里插入图片描述

三、问题原因:
点击下拉框的时候值可能没获取到,所以会默认显示在数据的中间

四、解决方案:
在延时器中 自己手动获取到选中的样式 然后滚动到所选的值上面

五、代码部分

HTML部分<a-form-model-item  prop="contentOfDept" ><span slot="label" >单位选择</span><a-tree-select@click="scollView"showSearchallowClear@change="ValChan"v-model="form.contentOfDept"treeNodeFilterProp="title":dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }":dropdownMatchSelectWidth="true":replace-fields="replaceFields":treeData="depts"placeholder="请选择":treeDefaultExpandAll="true"></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)},

六、效果展示:
在这里插入图片描述

你已经成功了,撒花。
今天的分享到此结束,欢迎小伙伴们一起交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/223305.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于ssm毕业生就业管理平台论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本毕业生就业管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…

Mesh里面的MFB是什么文件,工程重置了能否还原?

答&#xff1a;模方工程重置了以后&#xff0c;如果有备份可以还原。 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.1新增自动单体化建模功能&#xff0c;支持一键自动提取房屋结构&am…

JVM垃圾回收算法

自动化的管理内存资源&#xff0c;垃圾回收机制必须要有一套算法来进行计算&#xff0c;哪些是有效的对象&#xff0c;哪些是无效的对象&#xff0c;对于无效的对象就要进行回收处理。 常见的垃圾回收算法有&#xff1a;引用计数法、标记清除法、标记压缩法、复制算法、分代算…

如何消除视频中的背景噪音

如果你在繁忙的街道上、刮风的日子、或在其他有嘈杂声音的周围拍摄视频&#xff0c;则会产生令人烦恼的噪音。幸运的是&#xff0c;从视频中消除背景噪音并不是一件困难的事情&#xff0c;因为有许多可靠的降噪软件可以提供帮助。本文就收集了3种最佳方法&#xff0c;可帮助你轻…

[RoarCTF 2019]Easy Calc1 wp

[RoarCTF 2019]Easy Calc1 wp 预测试 手工测试 这个页面实现了一个简单的计算器功能&#xff0c;当输入 11 时能正确返回执行结果 2&#xff0c; 但当输入 11&&ifconfig 之类的表达式时&#xff0c;会出现弹窗&#xff1a; 查看源码 前端页面调用了一个函数&#xf…

掌握 RPC 接口测试:一篇详尽的接口测试手册

RPC 是什么&#xff1f; 远程过程调用协议&#xff08;RPC&#xff09;是一种技术&#xff0c;它允许在不同的机器上执行函数&#xff0c;就好像这些函数是本地调用一样。简单地说&#xff0c;客户端系统透明地从网络上的远程服务器软件请求服务&#xff0c;而无需理解复杂的网…

借助文档控件Aspose.Words,在Java中比较 Word、PDF 和 PPT 文档

文档比较是各个领域的一项关键任务&#xff0c;包括法律、出版和内容管理。它确保准确跟踪和审查对合同、报告或法律协议等文档的更改。Java 开发人员经常寻求高效可靠的方法来执行文档比较&#xff0c;而Aspose提供了强大的解决方案。在这篇博文中&#xff0c;我们将探讨如何高…

浏览器的事件循环机制(Event loop)

事件循环 浏览器的进程模型 何为进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 何为线程&#xff1f; …

C语言——字符函数和字符串函数(二)

&#x1f4dd;前言&#xff1a; 上一篇文章C语言——字符函数和字符串函数&#xff08;一&#xff09;对字符函数和字符串函数strlen&#xff0c;strcpy和strncpy&#xff0c;strcat和strncat进行了初步的讲解 这篇文章主要再讲解几个我们常用到的其他字符串函数&#xff08;附…

teamCity使用

1.server部署 2.地址 http://10.172.48.7:32204/favorite/projects?modebuilds 3.新增项目 拉取git项目 编辑配置 复制其他项目配置 步骤1.Maven 步骤2 build image 步骤3 push image 步骤4 deploy to k8s

mfc140u.dll丢失的解决方法的详细介绍,六种解决mfc140u.dll丢失的方法

今天的这篇文章将向各位分享一个有关电脑出现关于丢失mfc140u.dll错误的弹窗问题&#xff0c;这是一个很常见的问题。无论你是一名大学生还是其他身份&#xff0c;都可能会遇到这个问题。下面我会对mfc140u.dll丢失的解决方法进行详细的介绍。 一.六种解决mfc140u.dll丢失的方法…

Android笔记(十八):面向Compose组件结合Retrofit2和Rxjava3实现网络访问

一、Retrofit2 Square公司推出的Retrofit2库&#xff08;https://square.github.io/retrofit/&#xff09;&#xff0c;改变了网络访问的方式。它实现了网络请求的封装。Retrofit库采用回调处理方式&#xff0c;使得通过接口提交请求和相应的参数的配置&#xff0c;就可以获得…

辅助电源交流220V转5V200mA输出,不需要变压器

辅助电源交流220V转5V200mA输出&#xff0c;不需要变压器。 在当今智能家居、小家电等电子产品日益普及的时代&#xff0c;对辅助电源的需求也越来越大。一款高效、低成本、小巧封装的辅助电源芯片成为众多产品的迫切需求。今天&#xff0c;我们将为您介绍一款交流220V转5V200m…

Bytebase 2.12.0 - 改进自动补全和布局导航

&#x1f680; 新功能 支持 MySQL 高级自动补全。支持从 UI 上导入分类分级配置。 &#x1f514; 重大变更 作废已有企业版试用证书。之后可以通过提交申请获取新的试用证书。 &#x1f384; 改进 改进整体布局和导航。 支持在 SQL 编辑器里显示以及查询 PostgreSQL 数据…

“机器人V2.0时代已来”-任务规划难题迎刃而解,世界因机器人改变而翻转!

01-VILA背景简介 2022年&#xff0c;Michael Ahn, Anthony Brohan等人提出“Do as i can, not as i say: Grounding language in robotic affordances”算法。本文指出虽然大型语言模型可以编码关于世界的丰富语义知识&#xff0c;而这些知识对旨在对用自然语言表达的高级、时…

MAC配置环境变量

1、配置 JAVA JDK 1.1、查看 JDK 安装目录 &#xff08;1&#xff09;可以在Android Studio中查看&#xff0c;复制该路径 &#xff08;2&#xff09;也可以在官网下载 Java JDK下载地址 mac中的安装地址是"资源库->Java->JavaVirtualMachines"中 1.2、…

SQLMAP的使用(rails 为例)

1.启动一个项目&#xff0c;例如rails学习的项目&#xff0c;修改config/database.yml&#xff0c; 假设来一个接口&#xfeff; class YourModel::YourController < ApplicationController def test_sqlisql "select * from your_table_name where id " par…

scratch认识图形 2023年12月中国电子学会 图形化编程 scratch编程等级考试二级真题和答案解析

目录 scratch认识图形 一、题目要求 1、准备工作 2、功能实现 二、案例分析

编程性能调优方案

微信公众号转载&#xff0c;关注微信公众号掌握更多技术动态 --------------------------------------------------------------- 一、字符串与集合性能优化 1.String 对象的实现 在 Java 语言中&#xff0c;Sun 公司的工程师们对 String 对象做了大量的优化&#xff0c;来节…

【机器学习】利用线性回归预测披萨价格

目录 前言 一、绘制散点图 二、数据准备 三、一元线性回归模型训练 四、一元线性回归模型评估 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首…