首页 > 其他分享 >element ui tooltips不显示的bug

element ui tooltips不显示的bug

时间:2024-01-16 21:24:13浏览次数:29  
标签:tooltips el const cellChild tooltip cell ui table bug

form表单中一刷新页面input为什么会自动校验,明明是有值的,也提示必填

但是手输之后又是正常校验

原因:

初始化没有响应式,因为addFields里面没有写这个初始化的变量

解决办法:

让其响应式,初始化addFields里面添加此变量,
或者用 对象set的方式

// this.addFields.passNoticeTime = !!data ? data.passNoticeTime : 0(错误写法)
this.$set(this.addFields, 'passNoticeTime', !!data ? data.passNoticeTime : 0)

table中tooltip问题

table本身有自己的属性,可以控制超长就...,鼠标放上去就显示tooltip
属性 showOverflowTooltip = true即可
但是,如果是表格format的话,比如日期 formatDate,,这是溢出不会显示 个人认为这是element的一个bug

原因:查看element table的源码 table-body.js

表格要显示 tooltips的两个前提就是

    handleCellMouseEnter(event, row) {
      const table = this.table;
      // 判断是否text-overflow, 如果是就显示tooltip
      const cellChild = event.target.querySelector('.cell');
      if (!(hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {
        return;
      }
      const rangeWidth = range.getBoundingClientRect().width;
      const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
        (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
      if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) && this.$refs.tooltip) {
        const tooltip = this.$refs.tooltip;
        // TODO 会引起整个 Table 的重新渲染,需要优化
        this.tooltipContent = cell.innerText || cell.textContent;
        tooltip.referenceElm = cell;
        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
        tooltip.doDestroy();
        tooltip.setExpectedState(true);
        this.activateTooltip(tooltip);
      }
    },

1.需要class=cell
2.需要el-tooltip属性
但是表格单元格里面自带了一个class的属性,然后在format的组件又加一个cell的话,他实际是找不到后者的,所以鼠标放上去的时候,不会显示tooltip

解决办法

在format组件中添加 .cell 和 .el-tooltip class
然后在初始化的时候 用dom操作删除掉父元素的 class cell即可

mounted(){
  // fix: #104479 el-table 通过 cell 和 el-tooltip 类名判断 overflow 逻辑
  if (this.from=="table") {
      this.$el.parentElement.parentElement.className = '';
  }
}

标签:tooltips,el,const,cellChild,tooltip,cell,ui,table,bug
From: https://www.cnblogs.com/pengfei25/p/17968578

相关文章

  • android stuido copilot
    如何实现AndroidStudioCopilot整体流程为了实现AndroidStudioCopilot,我们需要按照以下步骤进行操作:步骤操作1.安装Copilot插件2.配置Copilot设置3.使用Copilot编写代码步骤一:安装Copilot插件首先,我们需要安装Copilot插件。通过以下步骤可以完成插件......
  • GUI_Download的Codepage参数 转载
    http://blog.chinaunix.net/u1/40527/showart.php?id=499557 DATA:CODEPAGETYPEABAP_ENCODVALUE'8400'.DATA:O_FILETYPESTRING.O_FILE=filename.CALLMETHODCL_GUI_FRONTEND_SERVICES=>GUI_DOWNLOAD EXPORTING   FILENAME         =O_FILE   F......
  • Vue加element Ui 实现下载文件和进度条展示
    <template><el-progress:percentage="percentage"></el-progress><h1>{title}</h1><el-button:disabled="isDisabled"@click="getProgress">下载文件</el-button></template>......
  • react-query-builder查询构建器中文文档
    官方包https://www.npmjs.com/package/react-querybuilder官方演示https://react-querybuilder.js.org/demo/antd网友经验https://www.cnblogs.com/niyan/p/17414642.htmlimportReactfrom'react';importQueryBuilderfrom'react-query-builder';const......
  • vulnhub-toppo(suid提权sudo提权)
    环境准备靶机192.168.116.138攻击机kali192.168.116.130演示直接访问webadmin目录下存在密码本使用ssh连接,账号ted,密码12345ted123使用项目进行探测LinEnumhttps://github.com/rebootuser/LinEnum 存在python可以使用suid提权使用python反弹shell /usr/b......
  • ESP32 Arduino开发 网络连接
    ESP32Arduino开发网络连接目录ESP32Arduino开发网络连接1.编写相关程序1.1.引入头文件1.2.调用WiFi连接函数1.3.检测网络连接状态1.4.连接超时处理2.STA模式与AP模式1.编写相关程序1.1.引入头文件WiFi.h并不是第三方的库,所以不需要先加载库#include<WiFi.h>1.......
  • easyui datebox 周选择器 结合moment.js获取一周的时间范围
    项目里用的easyui,用weekpicker的话需要与easyui代码有冲突会导致页面报错,所以直接改造一下easyui的datebox实现这一功能1<inputtype="text"class="easyui-datebox"data-options="formatter:myformatter,parser:myparser,onSelect:onSelect"id="S_Week">1......
  • UI自动化如何保持登录状态?
    给页面设置cookie信息,刷新页面清楚缓存实现保持登录状态;      通过cookie保持登录,1手动登录,通过applacation提取登录的cookie,2通过driver.add_cookie({“name”:”Passid”,”Value”:”xxxxx”) 然后通过driver.refresh()    自动保持cookie登录,首先判断是否......
  • 大师学SwiftUI第6章 - 声明式用户界面 Part 3
    安全域视图SwiftUI还内置了创建安全文本框的视图。这一视图会把用户输入的字符替换成点以及隐藏敏感信息,比如密码。SecureField(String,text:Binding):该初始化方法创建一个安全输入框。第一个参数定义占位文本,text参数为存储用户插入值的绑定属性。实现方式与TextField视图相同,我......
  • Layui官网—面板 - 页面元素
    一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等常规面板<divclass="layui-card"><divclass="layui-card-header">卡片面板</div><divclass="layui-card-body">卡片式面板面板通常用于非白色背景色的主体......