【Element】el-button disabled 为 true 置灰后后不显示外层 tooltip 问题

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 507平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

原创最新推荐文章于 2026-09-04 20:30:00 发布 507 阅读 AI 写同款· GEO 优化 ›

el-tooltip配合el-button禁用时显示提示比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也被el-button的禁用，无法打开了。解决方案就是在el-button的外层，再加上一个div包裹起来，这样的话，类名el-tooltip就会加到div身上，就不会受到按钮禁用的影响了。阅读详情

可将 el-tooltip 内的 el-button 外层包裹一个容器，如下:

收录于

Element

当前文章被收录于：

Element

27 篇文章 0 人学习

Element UI 相关

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#vue.js #javascript #前端 #elementui #ecmascript

DOM操作核心原理：属性、特性与样式的三层关系 DOM（文档对象模型）是浏览器将HTML解析为可编程JavaScript对象的核心机制。理解其底层原理，关键在于厘清属性（attributes）、特性（properties）和样式（styles）三者的本质差异与协同逻辑：属性对应HTML源码的静态文本，特性反映JS运行时的动态状态，而样式则需区分内联设置、CSS规则层叠与浏览器最终计算值。这种分层设计决定了为何setAttribute('value')无法更新输入框内容，而element.value可以；也解释了classList为何比className赋阅读详情

相关推荐

Rails 开发者必学的 Stimulus 轻量级 JavaScript 交互框架

Stimulus 是专为服务端渲染（SSR）场景设计的轻量级 JavaScript 框架，其核心在于通过 data-* 属性实现 DOM 元素与控制器的声明式、生命周期感知绑定。它不替代 React/Vue，而是解决传统 jQuery 或 UJS 在事件管理、作用域隔离、内存泄漏和状态同步上的隐性复杂度。基于约定优于配置原则，Stimulus 将交互逻辑组织为可命名、可测试、可复用的控制器类，天然适配 Ruby on Rails 的请求-响应模型。在 Turbo 生态中，它承担元素级行为增强职责，与 Tur

weixin_30410119的博客 458

el-button 的 disabled 属性

disabled = "false" 默认不禁用按钮。:disabled = "true" 禁用按钮。我总是分不清，记录一下。

Svn_Crush的博客 2579

querySelector与querySelectorAll：DOM操作的范式迁移

CSS选择器是前端开发的基础能力，其语法被querySelector和querySelectorAll完整复用，将样式定位逻辑直接映射为DOM查询能力。这种同构性不仅提升代码可读性与维护性，更带来性能优化与工程健壮性的双重价值——通过作用域限定、属性选择器、伪类状态匹配等技术，精准控制动态DOM结构。在响应式布局、表单交互、轮播组件及液态玻璃等现代UI场景中，它替代了getElementById等传统API的碎片化操作，成为中高级前端工程师实现高效、可扩展DOM操作的事实标准。

weixin_34006965的博客 1290

el-button的disabled属性动态绑定data数据

el-button的disabled属性动态绑定data中的数据

W18237579818的博客 4810

基于STM32F103C8T6的循迹避障小车完整制作过程（详细）----上篇（第123点）

基于STM32F103C8T6的循迹避障小车完整制作过程由于本人的一个小项目，要做一个基于STM32的循迹避障小车，前后花了约1周的时间，这个过程种也参考了很多大神分享的资料，学到很多的东西。但是资料都比较分散，有些东西也不好找，在这里就想把自己制作小车的一个整体过程记录分享一下，希望能够帮到你。我自己也算是一个小白，之前有做过你好！这是你第一次使用 Markdown编辑器所展示的欢迎...

weixin_43924857的博客 14万+

5G MBS（组播广播服务）深度解析：从标准架构到商用实践

大家好，我是码农老gou，一名专注于编程技术的程序员。在这个博客中，我将与大家分享我在工作和学习中的经验、见解以及一些实用的技术干货。 1079

VUE 中点击按钮后根据对某状态的判断将它置灰

m0_59761769的博客 7364

银河麒麟V10 SP1忘记密码？3分钟搞定单用户模式密码重置（附详细截图）

本文详细介绍了银河麒麟V10 SP1操作系统忘记登录密码后的应急恢复方法。核心是通过GRUB引导菜单进入单用户模式，无需密码即可获得root权限，从而快速重置用户密码。文章提供了从捕捉GRUB界面、编辑启动参数到执行密码修改命令的完整步骤图解与常见问题解决方案，帮助用户在几分钟内恢复系统访问。

w3x4y的博客 913

el-button的disabled属性无效

【代码】el-button的disabled属性无效。

资深Bug开发大师 2121

Imputation Methods for scRNA Sequencing Data

越来越多的研究者使用单细胞RNA测序(scRNA-seq)技术来表征单细胞水平的转录图谱。他们用它来研究复杂组织的异质性、转录组动力学和未知生物的多样性。然而，在基因表达模式随机性的scRNA-seq数据中普遍存在许多技术和生物学上的噪音。这些数据通常具有高维、稀疏和大量“dropout”值的特点，并且受批处理效应的影响。scRNA-seq数据中大量的“dropout”值严重掩盖了基因之间的重要关系，阻碍了下游分析。因此，scRNA-seq数据dropout值的估算就显得尤为重要。

qq_34179307的博客 539

【RF】Receiver Function接收函数：从理论到实践的深度解析

本文深入解析地震学中的接收函数（Receiver Function, RF）技术，从理论原理到实践操作。文章将RF比作地球的“听诊器”，详细阐述了其通过反褶积剥离震源影响、揭示地下结构（如莫霍面）的核心机制，并提供了使用Python和rf库进行数据处理、计算、动校正与叠加的完整实战流程，同时探讨了其应用、局限性与常见问题的解决方案。

Jerry的专栏 121

element UI中使用tooltip组件，当里边的按钮设置disabled后，tooltip不显示问题的解决方法

element UI中使用tooltip组件，当里边的按钮设置disabled后，tooltip不显示问题解决问题：当el-button设置了disabled为true时，发现鼠标放上去不显示提示信息了。 <el-tooltip content="提示信息" placement="top-start" > <el-button type="text" disabled="true" >删除</el-button&gt

cxwy_ing的博客 5914

5分钟搞定Nano-Banana图片编辑API对接：从Base64编码到生成图片全流程

本文详细介绍了如何快速对接Nano-Banana图片编辑API，基于gemini-2.5-flash-image-preview模型，从环境准备、Base64编码到API调用的全流程。通过实战示例和优化技巧，帮助开发者高效集成AI图片处理能力，提升产品竞争力。

dog123的博客 259

Element Plus 导航与反馈组件完全指南（15个核心组件）

Breadcrumb 面包屑用于显示当前页面在系统层级结构中的位置，帮助用户快速定位和导航。💡提示：面包屑常用于后台管理系统的页面导航，建议配合Menu组件使用。<template><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/list' }">列表</el-breadcrumb-item>

2301_78939167的博客 270

YOLOv11训练命令完全指南：从核心参数解析到高级调优实战（数据配置、epochs设定、batch-size优化与img-size调整）（二）

本文介绍了YOLOv11训练命令的完整配置与解析，提供了基础训练命令示例及参数详解。示例命令包含数据集配置（coco.yaml）、训练轮次（300）、批次大小（64）、图像尺寸（640）等核心参数，以及优化器（AdamW）、学习率（0.001）等调优选项。通过代码实现展示了训练器的初始化流程，包括参数解析、设备设置、数据加载和模型创建等关键步骤，为YOLOv11模型训练提供了实用指导。

本博客聚焦 YOLOv11 全流程落地，涵盖架构优化、数据集处理、训练技巧与多场景部署，兼及国产数据库、Java 开发与 AI 模型应用，内容兼顾理论与工程实践，为开发者提供系统干货，助力高效提升技术能力。 1093

【Matlab光伏功率预测】基于GRU门控循环单元的光伏功率时间序列预测（附MATLAB代码）

k8291121的博客 1099

Vue自定义权限指令v-permission设计与实现：从原理到实战

在前端开发中，权限控制是构建中后台系统、SaaS平台等应用的核心环节，它确保了不同角色用户对界面元素和功能的安全访问。其基本原理是通过对比用户权限标识与操作所需权限，动态控制UI元素的呈现与交互状态。自定义指令作为Vue.js框架提供的强大扩展机制，允许开发者封装可复用的DOM操作逻辑，是实现声明式、解耦权限控制的理想技术手段。通过设计v-permission指令，可以将繁琐的v-if权限判断抽象为简洁的声明式语法，显著提升代码可维护性，并支持权限变化的响应式更新。该方案尤其适用于按钮、菜单等元素的细粒度权

weixin_34375251的博客 368

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

JB3-7-Vue（二）

封装通用JS文件（工具，请求等），封装ElementPlus组件（路径导航，图标文字，数据页头，数据表格，数据表单，上传文件等）

周航宇的博客 957

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

Angular Renderer2 原理与实战：跨平台DOM操作的核心机制

Renderer2 是 Angular 实现平台无关 DOM 操作的关键抽象层，其本质是将视图更新逻辑与具体渲染环境解耦。它基于接口定义（Renderer2）与动态实现（DefaultDomRenderer2/ServerRenderer2/WebWorkerRenderer2）的分层设计，确保组件在浏览器、服务端渲染（SSR）及 Web Worker 等不同平台下行为一致且安全。该机制支撑了 Angular 的变更检测、样式封装、服务端预渲染和 Web Component 集成等核心能力。开发者绕过 Re

weixin_33713503的博客 450

SIMATIC S7-1200, S7-1500 PID 控制[手册]

el-button 显示与禁用

el-button 的显示与隐藏 iconfont 的引用

pymxb1991的专栏 1万+

VUE点击按钮置灰判断

VUE点击按钮置灰判断上代码根据页面值判断按钮是否可用，不可用置灰（不可点击true）在el-button或button标签里加上:disabled=“submissionFlag” 然后在return返回值里加上submissionFlag: true 默认为灰接下来在mounted方法里判断，首先要获取页面值然后判断是否置灰上代码第一步 <el-button :disabled=“submissionFlag” @click=“billingSubmission”>提交第

优快云tiexin的博客 1万+

前端ele根据0,1动态显示数据和按钮置灰

前段Vue和ele

qq_43511320的博客 807

disabled状态el-form下el-button的disabled的精细化控制

这样工作量就有点大。如果每个表单元素都写这个玩意也是很费劲的，幸好el-form提供了在表单上直接指定disabled的方法。从上面的代码可以想到，如果我把el-button的form.disabled设置为false是不是就解决了呢？可惜不起作用，网上查了才知道在函数式组件中不能用provide/inject，这个真是我的知识盲区，有机会需要进一步研究一下。这里会把el-button的一些功能封印，比如插槽，其实可以把插槽也拿过来，只是我这里不需要就没弄。有一个很复杂的表单，支持编辑和查看两种模式。

东逝水 2014

elementUI里的button使用disabled属性

学习记录：实现在table列表中控制二次点击按钮时对应行的button为不可点击，效果图如下： 1.el-table在表格按钮标签中定义disabled属性 HTML部分代码： <div id="app"> <el-table :data="showTableData" <el-table-column fixed="right" label="操作"

m0_54866636的博客 2196

按钮背景为图片，在按钮不可用时，将按钮置灰

这个需求有两种解决方法，一种是通过滤镜来实现，还有一种简单除暴，直接在按钮不可用时，将按钮背景图片换成灰色的背景 1.按钮添加灰色滤镜 .btn-disabled { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filt