tooltip 可算修复了~ view-design 的 table 的cell.vue

就这个bug可是有年头了,可算是修复了

ViewUI/src/components/table/cell.vue

https://github.com/view-design/ViewUI/blob/master/src/components/table/cell.vue

不过高手就是高手,用的 document.createRange 进行修复的。

<template v-if="column.tooltip">
<Tooltip transfer :content="row[column.key]" :theme="column.tooltipTheme ? column.tooltipTheme : tableRoot.tooltipTheme" :disabled="!showTooltip" :max-width="column.tooltipMaxWidth ? column.tooltipMaxWidth : tableRoot.tooltipMaxWidth" class="ivu-table-cell-tooltip">
<span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
</Tooltip>
</template>
handleTooltipIn () {
const $content = this.$refs.content;
let range = document.createRange();
range.setStart($content, 0);
range.setEnd($content, $content.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
this.showTooltip = rangeWidth > $content.offsetWidth;
range = null;
},

tooltip 可算修复了~ view-design 的 table 的cell.vue的更多相关文章

  1. ACM-计算几何之Quoit Design——hdu1007 zoj2107

    Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  2. mysql下优化表和修复表命令使用说明(REPAIR TABLE和OPTIMIZE TABLE)

    随着mysql的长期使用,可以修复表来优化,优化时减少磁盘占用空间.方便备份. REPAIR TABLE `table_name` 修复表 OPTIMIZE TABLE `table_name` 优化 ...

  3. mysql下优化表和修复表命令使用说明(REPAIR TABLE和OPTIMIZE TABLE)

    REPAIR TABLE `table_name` 修复表 OPTIMIZE TABLE `table_name` 优化表 show create table tablename   表结构 REPA ...

  4. 修复mysql:[ERROR] Native table ‘performance_schema’

    转: http://www.amznz.com/error-native-table-performance_schema/ mysql数据库出现如下错误,主要是因为升级了mysql软件包,而一些数据 ...

  5. React之ant design的table表格序号连续自增

    render(text,record,index){     return(       <span>{(pagination.current-1)*10+index+1}</spa ...

  6. ant design 的Table组件固定表头时不对齐

    现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...

  7. 深入理解 Android 之 View 的绘制流程

    概述 本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定 ...

  8. Android View的绘制流程

    写得太好了,本来还想自己写的,奈何肚里墨水有限,直接转吧.正所谓前人种树,后人乘凉.. View的绘制和事件处理是两个重要的主题,上一篇<图解 Android事件分发机制>已经把事件的分发 ...

  9. View绘制过程理解

    假期撸了几篇自定义View相关的东西,后两天下雨呆在家里还是效率太低Orz   每个Activity都包含一个Window对象,这个Window对象通常由PhoneWindow来实现[1],而每个Wi ...

  10. 创建一个Table View

    在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...

随机推荐

  1. CE修改器入门:未知数值扫描

    经过第二关的练习,你已经理解了如何利用"精确数值"扫描查找数值了,让我们进行下一步,本关主要用来搜索进度条,人物血条等,因为这些数据通常是一个进度条,我们无法直接看到的数据,此时可 ...

  2. C/C++ 实现简易HTTP服务器

    #include <stdio.h> #include <stdlib.h> #include <process.h> #include <WinSock2. ...

  3. NC23803 DongDong认亲戚

    题目链接 题目 题目描述 DongDong每年过春节都要回到老家探亲,然而DongDong记性并不好,没法想起谁是谁的亲戚(定义:若A和B是亲戚,B和C是亲戚,那么A和C也是亲戚),她只好求助于会编程 ...

  4. 从零开始手写缓存框架(二)redis expire 过期原理及实现

    前言 我们在 从零手写 cache 框架(一)实现固定大小的缓存 中已经初步实现了我们的 cache. 本节,让我们来一起学习一下如何实现类似 redis 中的 expire 过期功能. 过期是一个非 ...

  5. comm命令

    comm命令 comm命令用于比较两个已排过序的文件,该命令会一列列地比较两个已排序文件的差异,并将其结果显示出来,如果没有指定任何参数,则会把结果分成3列显示:第1列仅是在第1个文件中出现过的列,第 ...

  6. Java设计模式-中介者模式Mediator

    介绍 中介者模式(Mediator Pattern),用一个中介对象来封装一系列的对象交互.中介者使各个对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 中介者模式属于行 ...

  7. JSP使用FileUpload上传文件设置setSizeMax后连接被重置

    今天在学习利用JSP+Servlet+FileUpload开发文件上传功能.在设置了上传文件最大限制为10M以后,选择了3M的pdf上传提交后连接被重置了... 我的代码: //设置上传单个文件的大小 ...

  8. CSS font-weight

    主要理解UI给得英文名 对应得数值 字体粗细:'font-weight'属性名称: font-weight取值: normal | bold | bolder | lighter | 100 | 20 ...

  9. python字典操作的大O效率

  10. pep8相关规范

    https://www.jianshu.com/p/ffcc66bab3ce 导包规范: 1.首先是标准库,如 import os 2.然后是第三方库,如 from django.conf impor ...