ElementUI el-select 组件动态设置disabled后,高度变更的问题解决办法

问题描述

Vue2 项目在使用 el-select 组件时,动态将disabled变更为了 true,元素的高度发生了变化。
在这里插入图片描述

问题原因

通过浏览器开发人员工具面板,发现,组件内的 input 元素被动态设置了height的样式:
在这里插入图片描述

在项目中检查后并没有找到触发这个设置的代码,所以怀疑是组件自身的逻辑。

于是找到 ElSelect 的源码(node_modules\element-ui\packages\select\src\select.vue),果然发现有一个方法里进行了 height 的设置:

resetInputHeight() {if (this.collapseTags && !this.filterable) return;this.$nextTick(() => {if (!this.$refs.reference) return;let inputChildNodes = this.$refs.reference.$el.childNodes;let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];const tags = this.$refs.tags;const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;const sizeInMap = this.initialInputHeight || 40;// 这里input.style.height = this.selected.length === 0? sizeInMap + 'px': Math.max(tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,sizeInMap) + 'px';if (this.visible && this.emptyText !== false) {this.broadcast('ElSelectDropdown', 'updatePopper');}});
},

这个方法在 disabled 变更时会触发:

watch: {selectDisabled() {this.$nextTick(() => {this.resetInputHeight();});},
...

我的解决办法

这个逻辑可能是为了多选时文本框的高度而设的,因为确认我的项目在单选时不需要考虑高度的变化,所以我直接替换这个监听回调,以解决了我的问题。

import Vue from 'vue'
import ElementUI from 'element-ui'const elSelectWatcherSelectDisabled = ElementUI.Select.watch.selectDisabled
ElementUI.Select.watch.selectDisabled = function () {if (this.multiple) {elSelectWatcherSelectDisabled()}
}Vue.use(ElementUI)

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

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

相关文章

微软Office PLUS办公插件下载安装指南

微软OfficePLUS插件下载安装指南 简介: OfficePLUS微软官方出品的Office插件 ,OfficePLUS拥有30万高质量模板素材,能帮助Word、Excel、Powerpoint、PDF等多种办公软件提升效率,具有智能化、模板质量高、运行快、稳定性强等优点。…

prompt第二讲-langchain实现中英翻译助手

文章目录 prompt模板 (prompt template)langchain 中的prompt模板 (prompt template)langchain实现中英翻译助手 prompt模板 (prompt template) 开篇我介绍了在llm中,通常输入的那个字符串会被我们称之为prompt,下面就是一个中英文翻译助手的prompt例子…

探索智能合约在金融科技中的前沿应用与挑战

随着区块链技术的发展和普及,智能合约作为其核心应用之一,在金融科技(FinTech)领域中展现出了巨大的潜力和挑战。本文将深入探讨智能合约的基本概念、前沿应用案例,以及面临的技术挑战和发展趋势,旨在帮助读…

解决QT creator中文乱码问题

1.首先设置文本编辑器为UTF-8 先在工具-选项-文本编辑器-behavior部分选择文件编码为UTF-8,紧接着是选择“如果编码是UTF-8则添加”,如下图 2.设置ext code for tools 为system 具体解决办法是 工具-选项-环境-interfaces这一栏有一个“Text code for to…

基于R语言的水文、水环境模型优化技术及快速率定方法与多模型案例

在水利、环境、生态、机械以及航天等领域中,数学模型已经成为一种常用的技术手段。同时,为了提高模型的性能,减小模型误用带来的风险;模型的优化技术也被广泛用于模型的使用过程。模型参数的快速优化技术不但涉及到优化本身而且涉…

MySQL篇:事务

1.四大特性 首先,事务的四大特性:ACID(原子性,一致性,隔离性,持久性) 在InnoDB引擎中,是怎么来保证这四个特性的呢? 持久性是通过 redo log (重做日志&…

Andriod Stdio新建Kotlin的Jetpack Compose简单项目

1.选择 No Activity 2.选择kotlin 4.右键选择 在目录MyApplication下 New->Compose->Empty Project 出现下面的画面 Finish 完成

聊聊常见的分布式ID解决方案

highlight: xcode theme: vuepress 为什么要使用分布式ID? 随着 Web 开发技术的不断发展,单体的系统逐步走向分布式系统。在分布式系统中,使用分布式 ID(Distributed IDs)主要是为了在没有单点故障的情况下生成唯一标识符。这些唯一标识符在很…

【Linux】进程间通信——命名管道和共享内存

目录 命名管道(named pipe) 命令行中使用 代码中使用 共享内存(shared memory) shmget ipcs命令 shmctl shmat/shmdt 简单通信 命名管道(named pipe) 之前我们说了匿名管道,但是匿名管道…

为什么要使用加密软件?

一、保护数据安全:加密软件通过复杂的加密算法对敏感数据进行加密处理,使得未经授权的人员即使获取了加密数据,也无法轻易解密和获取其中的内容。这极大地提高了数据在存储、传输和使用过程中的安全性。 二、遵守法律法规:在许多国…

无人机图像目标检测

本仓库是人工智能课程的课程作业仓库,主要是完成无人机图像目标检测的任务,我们对visdrone数据集进行了处理,在yolo和ssd两种框架下进行了训练和测试,并编写demo用于实时的无人机图像目标检测。 requirements依赖: ss…

ubuntu虚拟机安装ssh时报错 正在等待缓存锁

问题: 连接vm ubuntu虚拟机安装ssh时报错 正在等待缓存锁。 sudo apt install openssh-server 处理办法 sudo rm /var/lib/dpkg/lock-frontend sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock

K8S ingress 初体验 - ingress-ngnix 的安装与使用

准备环境 先把 google 的vm 跑起来… gatemanMoreFine-S500:~/projects/coding/k8s-s/service-case/cloud-user$ kubectl get nodes NAME STATUS ROLES AGE VERSION k8s-master Ready control-plane,master 124d v1.23.6 k8s-no…

python数据可视化(5)——绘制饼图

课程学习来源:b站up:【蚂蚁学python】 【课程链接:【【数据可视化】Python数据图表可视化入门到实战】】 【课程资料链接:【链接】】 Python绘制饼图分析北京天气 饼图,是一个划分为几个扇形的圆形统计图表&#xff…

爬虫-requests和Selenium

1、了解requests的功能 1.1 使用post和get发送请求 HTTP中常见发送网络请求的方式有两种,GET和POST。GET是从指定的资源请求数据,POST是向指定的资源提交要被处理的数据。 GET的用法: import requestsr requests.get("https://www.…

Milvus 核心设计(5)--- scalar indexwork mechanism

目录 背景 Scalar index 简介 属性过滤 扫描数据段 相似性搜索 返回结果 举例说明 1. 属性过滤 2. 扫描数据段 3. 相似性搜索 实际应用中的考虑 Scalar Index 方式 Auto indexing Inverted indexing 背景 继续Milvus的很细设计,前面主要阐述了Milvu…

Swift网络爬虫与数据可视化的结合 (1)

前言 在当今数字化时代,数据的重要性不言而喻。Swift,作为一种现代的编程语言,以其高性能、易用性和安全性,成为了开发iOS和macOS应用的首选。本文将探讨如何使用Swift来开发一个网络爬虫,以及如何将爬取的数据进行可…

图像边缘检测中Sobel算子的原理,并附OpenCV和Matlab的示例代码

Sobel算子是一种用于图像边缘检测的离散微分算子。它结合了图像的平滑处理和微分计算,旨在强调图像中强度变化显著的区域,即边缘。Sobel算子在图像处理中被广泛使用,特别是在计算机视觉和图像分析领域。 Sobel算子的原理 Sobel算子主要用于计…

【数学建模与优化】:解析与实践

目录 数学建模概述 1. 什么是数学模型 2. 数学模型的分类 2.1 按应用领域分类 2.2 按建模方法分类 2.3 按是否考虑随机因素分类 2.4 按变量的连续性分类 2.5 按对对象内部规律了解程度分类 2.6 按变量的基本关系分类 2.7 按是否考虑时间变化分类 3. 数学规划及优化模…

【车载开发系列】GIT教程---如何下载代码库

【车载开发系列】GIT教程—如何下载代码库 【车载开发系列】GIT教程---如何下载代码库 【车载开发系列】GIT教程---如何下载代码库一. 设置用户名和邮箱二. 生成SSH三. 登录远程github仓库配置四. Git中的ssh协议介绍五. 什么是GitLab六. GitLab与GitHub区别1)用途和…