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.mzph.cn/diannao/46697.shtml

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

相关文章

深度解析:如何优雅地删除GitHub仓库中的特定commit历史

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

three.js创建基础模型

场景是一个三维空间,是所有物品的容器。可以将其想象成一个空房间,里面可以放置要呈现的物体、相机、光源等。 通过new THREE.Scene()来创建一个新的场景。 /**1. 创建场景 -- 放置物体对象的环境*/ const scene new THREE.Scene();场景只是一个三维的…

Lianwei 安全周报|2024.07.15

新的一周又开始了,以下是本周「Lianwei周报」,我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件,保证大家不错过本周的每一个重点! 政策/标准/指南最新动态 01 《人工智能全球治理上海宣言》发布 我们强调共同促…

django学习入门系列之第四点《案例 后台管理样例》

文章目录 往期回顾 前期准备&#xff1a; 导航新建&#xff0c;按钮表格 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!-- 开发版本 --><link rel"stylesheet…

【php开发系统遇到CPU飙升的思考记录】

PHP开发系统遇到CPU负载飙升到瓶颈时&#xff0c;这里有一些步骤和策略可以快速定位并解决问题&#xff1a; 1. **使用监控工具**: 利用top命令来查看系统的整体CPU使用情况&#xff0c;特别是查看load average&#xff08;平均负载&#xff09;&#xff0c;这可以快速判断系统…

2024-07-16 Unity插件 Odin Inspector6 —— Group Attributes

文章目录 1 说明2 Group 特性2.1 BoxGroup2.2 ButtonGroup2.3 FoldoutGroup2.4 ShowIfGroup / HideIfGroup2.5 HorizontalGroup2.6 ResponsiveButtonGroup2.7 TabGroup2.8 ToggleGroup2.9 VerticalGroup 1 说明 ​ 本文介绍 Odin Inspector 插件中有关 Group 特性的使用方法。…

【解决问题】permission denied while trying to connect to the Docker daemon socket

解决方法 sudo usermod -aG docker $USER 运行上面命令&#xff0c;将当前用户添加到 docker 组&#xff0c;重启电脑。 GPT-4o (OpenAI) 看起来你在尝试通过 make build 构建项目时遇到了权限问题&#xff0c;尤其是在拉取 Docker 镜像时没有权限访问 Docker 的 Unix 套接…

如何使用 GPT?

​通过实例&#xff0c;来展示如何最好地使用 GPT。 生成文字 假设你在写一篇文章&#xff0c;需要在结尾加上这样一句&#xff1a;「California’s population is 53 times that of Alaska.」&#xff08;加州的人口是阿拉斯加州的 53 倍&#xff09;。 但现在你不知道这两个…

谷歌准备斥资 230 亿收购网络安全初创公司 Wiz

Alphabet 正在就收购 Wiz 进行深入谈判&#xff0c;这将显著增强其安全能力。这将是谷歌母公司有史以来最大规模的收购。 这是路透社根据匿名消息来源撰写的内容。目标收购金额为230亿美元&#xff0c;即211亿欧元。 Wiz 拥有实时检测和响应网络威胁的技术。通过实施人工智能…

有关电力电子技术的一些相关仿真和分析:⑥单相相控调压电路与单相斩控调压电路(MATLAB/Siumlink仿真)

针对单相相控调压电路&#xff0c;仿真研究对于给定负载&#xff0c;不同触发角作用下&#xff0c;输出电压波形和输入电流波形&#xff08;对照电网电压&#xff09;&#xff0c;研究输出电压有效值随触发角变化的规律&#xff0c;讨论并验证输入电流连续的条件。采用相同的电…

WPF实现一个带旋转动画的菜单栏

WPF实现一个带旋转动画的菜单栏 一、创建WPF项目及文件1、创建项目2、创建文件夹及文件3、添加引用 二、代码实现2.ControlAttachProperty类 一、创建WPF项目及文件 1、创建项目 打开VS2022,创建一个WPF项目&#xff0c;如下所示 2、创建文件夹及文件 创建资源文件夹&…

<Qt> 初识Qt

目录 一、项目文件解析 widget.h main.cpp widget.cpp widget.ui .pro文件 二、QT 实现Hello World程序 &#xff08;一&#xff09;按钮控件 1. 纯代码 2. 图形化 &#xff08;二&#xff09;标签控件 1. 纯代码 2. 图形化 三、内存泄漏问题 四、qdebug()的使用…

php基础: 三角形

包含&#xff1a;左三角、左上三角、右三角、右上三角、等腰三角、倒等腰三角。注意空格的数量&#xff0c;因为*号后面加了空格 /*** * 左三角形* param $n* return void*/ function triangleLeft($n){echo <pre>;for ($i 1; $i < $n; $i) {for ($j 1; $j < $i…

el-table的selection多选表格改为单选

需求场景: 选择表格数据时&#xff0c;需要控制单条数据的操作按钮是否禁用。 效果图: html代码: <div><el-tableref"multipleTable":data"tableData"tooltip-effect"dark"style"width: 100%"selection-change"handl…

定制化服务发现:Eureka中服务实例偏好的高级配置

定制化服务发现&#xff1a;Eureka中服务实例偏好的高级配置 在微服务架构中&#xff0c;服务实例的智能管理和优化是保证系统高效运行的关键。Eureka作为Netflix开源的服务注册与发现框架&#xff0c;提供了丰富的配置选项来满足不同场景下的需求。服务实例偏好配置允许开发者…

Android:创建自定义View

点击查看创建自定义view官网文档 一、简介 设计良好的自定义视图与任何其他精心设计的类一样。它通过一个简单的接口封装一组特定的功能&#xff0c;高效使用 CPU 和内存&#xff0c;诸如此类。除了是一个精心设计的类之外&#xff0c;自定义视图还必须执行以下操作&#xff1…

LinuxShell编程2——shell搭建Discuzz论坛网站

目录 一、环境准备 ①准备一台虚拟机 ②初始化虚拟机 1、关闭防火墙 2、关闭selinux 3、配置yum源 4、修改主机名 二、搭建LAMP环境 ①安装httpd(阿帕奇apache&#xff09;服务器 查看是否安装过httpd 启动httpd 设置开机启动 查看状态 安装网络工具 测试 ②安装…

【CUDA】thrust进行前缀和的操作

接上篇文章&#xff0c;可以发现使用CUDA提供的API进行前缀和扫描时&#xff0c;第一次运行的时间不如共享内存访问&#xff0c;猜测是使用到了全局内存。 首先看调用逻辑&#xff1a; thrust::inclusive_scan(thrust::device, d_x, d_x N, d_x);第一个参数指定了设备&#x…

Spark和Hadoop作业之间的区别

Spark和Hadoop是两种广泛使用的大数据处理框架&#xff0c;各自有着不同的设计理念和使用场景。以下是它们之间的主要区别&#xff1a; 架构和处理模式 计算模型&#xff1a; Hadoop&#xff1a;基于MapReduce编程模型。任务分为Map和Reduce两个阶段&#xff0c;处理批量数据较…

安全加固:Eureka服务实例安全组配置全攻略

安全加固&#xff1a;Eureka服务实例安全组配置全攻略 在微服务架构中&#xff0c;服务的安全性是保障系统稳定性和数据完整性的关键。Eureka作为Netflix开源的服务发现框架&#xff0c;不仅提供服务注册与发现功能&#xff0c;还可以通过配置服务实例安全组来增强安全性。本文…