vue2 ant-design select组件自定义下拉框, dropdownRender 使用,以及遇到的坑

业务需求:下拉框需要满足用户可输入筛选 和 点击右侧 字符按钮 #A-Z进行用户选择

1、基础页面代码

<div><a-selectstyle="width: 100%"placeholder="请选择客户"allow-clearshow-search:filter-option="false":not-found-content="fetching ? undefined : null":defaultActiveFirstOption="false":getPopupContainer="getPopupContainer"@search="searhcCust"@dropdownVisibleChange="dropdownVisibleChange">//dropdownRender 插件使用,自定义右边<divslot="dropdownRender"slot-scope="menu"><div class="index-bar"><divv-for="letterItem in letter":key="letterItem"@click.prevent="scrollOn(letterItem)"class="index-letter"@mousedown="e => e.preventDefault()" // 阻止调用默认事件>{{ letterItem }}</div></div><v-nodes :vnodes="menu" /> // 注意要在components中定义</div><a-select-opt-groupv-for="(group, index) in peoArray":key="index"><spanslot="label"class="option-letter":id="'peo_' + componentId + group.key">{{group.key}}</span><a-select-optionv-for="option in group.list":key="option.custRowId":value="option.custRowId":title="option.custName"><span>{{ option.custName }}</span></a-select-option></a-select-opt-group></a-select></div>

2、script中的代码

<script>
import { debounce } from 'lodash'
export default {props: {componentId: { // 设置不同的id,用于同页面有多个此组件时锚点不生效type: String,default: ''}},components: {VNodes: {functional: true,render: (h, ctx) => ctx.props.vnodes,}},data() {return {dropOpen: false,searchValue: '',navBarHeight: '50px', // 导航栏高度letter: [], // 字母检索列表peoArray: [], // 通讯录列表custList: null,custRowId: undefined,fetching: false,debounceGetCustInfoKeyList: null,}},created() {this.getCustInfoKeyList()this.debounceGetCustInfoKeyList = debounce(this.getCustInfoKeyList, 500)},methods: {dropdownVisibleChange(open) {this.dropOpen = open},getPopupContainer(triggerNode) {if (this.modalSelect) {return triggerNode.parentNode} else {return document.body}},changeCust(val) {this.$emit('change', val)},getList(peoArray) {let newList = []peoArray.forEach(element => {newList.push(...element.list)})return newList},searhcCust(val) {this.searchValue = valthis.debounceGetCustInfoKeyList()},getCustInfoKeyList() {const params = {custName: this.searchValue,}this.$http.XXX(params).then(res => {if (res.code === 200) {this.custList = res.dataif (this.custList) {this.setList()} else {this.peoArray = []}this.fetching = false} else {this.$message.warn(res.msg)this.fetching = false}})},setList() {let list = []this.letter = []for (const key in this.custList) {this.letter.push(key)list.push({key,list: this.custList[key]})}setTimeout(() => {this.peoArray = list})},// 字母检索scrollOn(item) {let target = document.getElementById('peo_' + this.componentId + item) // 获取每个字母通讯录对象if (target) {const scrollDom = document.getElementsByClassName('ant-select-dropdown-menu')[0]scrollDom.scrollTo({behavior: 'smooth',top: target.offsetTop - 10})} else {this.$message.warn(`当前${item}元素下暂无客户`)}}}
}
</script>

3、基础CSS代码


.index-bar {position: absolute;z-index: 99;right: 10px;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;align-items: center;
}.index-letter {margin: 0;cursor: pointer;color: #1677ff;font-weight: 500;font-size: 12px;line-height: 20px;
}
.option-letter {font-weight: 600;color: rgba(0, 0, 0, 0.45);
}

4、遇到的坑是什么呢?
就是在同一个页面,渲染同一个组件时,在点击前一个组件后,后面的组件右侧按钮滚动失效。
造成这个问题的原因就是 dropdownRender 渲染不会销毁,导致scrollOn获取到的DOM是同一组数据,解决方法有两种:

	// 1、在 dropdownRender 插件的地方<divv-if="dropOpen"slot="dropdownRender"slot-scope="menu">// 2、scrollOn 中修改查询Dom方法let target = document.getElementById('peo_' + this.componentId + item) // 获取每个字母通讯录对象if (target) {const parentDom = document.getElementById(offsetParent.id)const scrollDom = parentDom.children[0]scrollDom.scrollTo({behavior: 'smooth',top: target.offsetTop - 10})} else {this.$message.warning(`当前${item}元素下暂无客户`)}

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

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

相关文章

计算机硬件---如何更新自己电脑的BLOS

1找官网 例如“我使用的是HP&#xff08;惠普&#xff09;品牌的电脑”我只需要在浏览器上搜索“惠普官网”或“惠普-blos更新” 就可以看到&#xff0c;来自官网中更新blos的信息 2.有些品牌要查序列号该怎么办呢&#xff1f; 有许多方法可以查询&#xff0c;例如&#xf…

android13 frameworks里面常用的保存信息或者版本判断的方法

总纲 android13 rom 开发总纲说明 目录 1.前言 2. 数据库 2.1 代码读取用法参考 3.prop 属性配置 3.1 property的key值有哪些特点 4.区别 5. 其他数据存储 6.彩蛋 1.前言 frameworks 不像我们一般开发app那样,很多应用保存的方法都无法使用。这里记录我们系统rom开…

Java性能优化-if-else简化技巧

场景 Java性能优化-switch-case和if-else速度性能对比&#xff0c;到底谁快&#xff1f;&#xff1a; Java性能优化-switch-case和if-else速度性能对比&#xff0c;到底谁快&#xff1f;-CSDN博客 如果单纯是做情景选择&#xff0c;建议使用switch&#xff0c;如果必须使用i…

关于java的反射

❓❓❓反射是啥呀相信许多学java的同学非常困惑在学的时候&#xff0c;总是感觉懂了却又没懂或者直接忽略过去了&#xff0c;那么本文就带大家探讨一下什么是反射在java中以及它的机制和运用。 ⭐️什么是反射&#xff1a; 首先我们知道一些知识&#xff1a; 维基百科的解释 …

武汉市集成电路领域重点产业链研究咨询服务机构申报条件、时间

武汉市集成电路领域重点产业链研究咨询服务机构公开遴选有关内容如下&#xff0c;武汉市的企业单位可以了解一下 一、采购内容 &#xff08;一&#xff09;项目名称 武汉市集成电路领域重点产业链研究咨询服务项目。 &#xff08;二&#xff09;项目内容 为进一步推动我市…

springboot项目 导入 maven坐标 错误 Could not transfer artifact XXX

1.报错原因 当时导入的是 redis坐标 &#xff0c;导入jar 包报错&#xff08;当时是网速太慢了&#xff0c;一直卡着不动 就关了 idea 重新下载&#xff09;结果报错 之前的redis 项目都可以的&#xff0c;网上找了一下 都没解决 2.解决办法 既然说不能传输&#xff0c; 就说…

有用的工具

一、appuploader Appuploader home -- A tool improve ios develop efficiency such as submit ipa to appstore and manage ios certificate这是一款p12证书查看的工具&#xff0c; 需要建立一个apple ID专用密码&#xff1a;Manage your Apple ID

redis其他类型和配置文件

很多博客只讲了五大基本类型&#xff0c;确实&#xff0c;是最常用的&#xff0c;而且百分之九十的程序员对于Redis只限于了解String这种最常用的。但是我个人认为&#xff0c;既然Redis官方提供了其他的数据类型&#xff0c;肯定是有相应的考量的&#xff0c;在某些特殊的业务…

C++相关概念和易错语法(22)(final、纯虚函数、继承多态难点)

1.final final在继承和多态中都可以使用&#xff0c;在继承中是指不想将自己被继承&#xff0c;在多态中是指不想该函数被重写&#xff0c;比较简单&#xff0c;下面是一些使用例子。 2.纯虚函数 当我们需要抽象一个类的时候&#xff0c;我们就需要用到纯虚函数。所谓抽象的类…

C# 4.0 等待线程结束

在C#中&#xff0c;如果你正在使用多线程编程&#xff0c;并且想要等待一个或多个线程完成它们的工作再继续执行&#xff0c;有几种方式可以实现。从C# 4.0开始&#xff0c;虽然直接用于等待线程结束的特性&#xff08;如Thread.Join()&#xff09;在之前的版本中也已经存在&am…

升级版凯撒密码加密解密器

目录 开头程序程序的流程图程序加密与解密的效果例1加密的过程加密之后的文本 例2解密之后的文本解密之后的文本 例3加密之后的文本加密之后的文本 结尾 开头 大家好&#xff0c;我叫这是我58。今天&#xff0c;我们来看一下我用C语言编译的升级版凯撒密码加密解密器和与之相关…

小程序 - - - - - 实现渐隐渐显(监听滚动距离版)

代码如下&#xff1a; <!-- fixed-left --> <view class"fixed-box" animation"{{animationData}}">这里是渐隐渐显的标签 </view>.fixed-box {position: fixed;left: 0;top: 0;z-index: 999;background-color: #ccc;/* background-colo…

如何设计统计量及相关假设检验

一、如何设置H0和H1假设 谁做H0&#xff0c;谁做H1&#xff0c;在统计学的假设检验里是有约定俗成的规定的。即&#xff1a;status quo&#xff08;默认/现状&#xff09;是H0&#xff0c;而新观点或试图challenge现状的是H1。H1也叫research hypothesis&#xff0c;所以我们做…

【多个Python版本存在,使用pip+不同版本安装库时,windows弹出打开方式窗口的解决方法】

问题描述 电脑上存在python3.9&#xff0c;3.10&#xff0c;3.11&#xff0c;安装顺序也是先安装3.9&#xff0c;然后3.10&#xff0c;最后3.11&#xff0c;那么直接使用pip安装&#xff0c;会装在3.11的位置&#xff0c;经过搜索可以通过pip版本&#xff0c;比如pip3.9 insta…

1.3- Zygote

第三节 Zygote 在Android系统中&#xff0c;Zygote是一个非常核心的组件&#xff0c;它扮演着孵化新应用程序进程的角色。Zygote是Android启动过程中创建的第一个Java虚拟机&#xff08;JVM&#xff09;实例&#xff08;在Android中称为Dalvik或ART虚拟机&#xff0c;取决于An…

如何在勒索软件攻击中幸存下来:最佳备份实践、勒索拦截方案

无论身处什么业务或行业&#xff0c;数据都是您业务的关键资产。没有针对数据进行安全可靠的备份保护&#xff0c;您将会受到许多“可能性”的威胁&#xff0c;无论数据丢失是由于在键盘上洒了饮料还是遭受到了勒索软件的攻击。 为了确保业务不被中断&#xff0c;企业数据不会…

Python: 初识Python

文章目录 1. Python的背景知识1.1 Python是咋来的?1.2 Python的特点1.3 Python能干啥?1.4 Python的缺点 2. 搭建Python环境2.1 安装Python2.2 安装PyCharm2.3 用pycharm编写python程序 1. Python的背景知识 1.1 Python是咋来的? 由Guido van Rossum于1989年圣诞节为打发无…

一个用于管理多个 Node.js 版本的安装和切换开源工具

大家好&#xff0c;今天给大家分享一个用于管理多个Node.js版本的工具 NVM&#xff08;Node Version Manager&#xff09;&#xff0c;它允许开发者在同一台机器上安装和使用不同版本的Node.js&#xff0c;解决了版本兼容性问题&#xff0c;为开发者提供了极大的便利。 在开发环…

路网双线合并单线——ArcGISpro 解决方法

路网双线合并成单线是一个在地图制作、交通规划以及GIS分析中常见的需求。双线路网定义&#xff1a;具有不同流向、不同平面结构的道路。此外&#xff0c;车道数较多的道路&#xff08;例如&#xff0c;双黄实线车道数大于4的道路&#xff09;也可以视为双线路网&#xff0c;本…

iPhone 如何修改锁屏密码?修改密码的具体步骤总结

修改 iPhone 锁屏密码 当你还记得当前设置的锁屏密码时&#xff0c;想要修改密码就非常的简单了&#xff0c;只需要简单的点几下就可以重新设置新密码&#xff0c;下面是具体的操作步骤&#xff1a; 首先我们进入设置应用程序&#xff0c;然后找到“面容 ID 与密码”。 然后需…