element ui tooltips不显示的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 = '';
  }
}

如果有样式也会影响tooltip的显示

backdrop-filter:blur(5px)
posted @ 2024-01-16 21:14  人在路途  阅读(131)  评论(0编辑  收藏  举报