当程序员多好玩：表格自带的tooltip总跑？看我怎么破！
Demo：
https://sunzsh.github.io/vue-demos/#/table-tooltip
源码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/el-table-patch_tooltip.js
做程序员多好玩啊
大家看这个bug
其实啊这个问题重点不在于技术
而是需求
什么意思呢
首先他给这个表格超长的列哈
加了一个悬浮提示
然后他在想能不能支持用户
去复制上面这个完整的内容
但是呢大家看我鼠标一上来呢
刚才那个就没了
现在变成上面这一行的了
所以我说
其实这个问题的重点在于需求
为什么呢
因为当我们（鼠标）在下面的时候鼠标再上来
系统没办法区分鼠标上来的意图
就说系统不知道你是想
复制这个黑框里的内容呢
还是想看上一行的完整的内容
所以呢要解决这个问题
我们要先设计一个交互方式
那我的想法是
我们能不能在悬浮出来弹框之后啊
我们按住Alt
然后呢它上面就可以复制了
像这样
那现在是我已经做好的版本
其实很简单啊先给大家看一下效果
就是我们在main.js里边把这个补丁打进去
然后呢我们在使用的地方
就正常用el-table就可以了
跟正常的使用没什么区别
我先把这个注视掉
我们再来看没有这补丁的效果哈
注意看现在是这一行
然后按住Alt尝试去复制
注意大家看它不好使
然后呢我们把这个再加上
按住Alt上来这样就可以了
然后Alt松手它就可以了
这个补丁文件
等一下我要把它传到GitHub上
接下来
我简单给大家说一下实现思路哈
其实特别简单
就是两个事件，在这里
一个是keydown
一个是keyup
也就是说当我们鼠标（口误：键盘）按下的时候
我们先做一些判断
比如说看它是不是按Alt键啊
重点的是这一行
就这一行
就是我们找到这个tbody里边的tooltip
把它删掉
删掉之前呢
把它备份到另一个变量里边
还是REFS里边
放到这里
这是key down
然后呢当我们
松开的时候
再把刚才备份的这个
还原到这个属性里边
再把备份的删掉
这两行那下面这两个呢
我们一会再给大家解释啊
先把这个注掉
把这两个注掉给大家看没有这两个
是什么效果
我们来看一下
打开按住Alt上来它是可以选中的
但是没有那两行代码
会有什么问题呢
大家看啊
我从这个tooltip和这个黑色的边框
移出鼠标的时候
大家注意
它就隐藏了
因为我们选中的时候
很有可能不小心就拖拽出去了
大家看，他就隐藏了
所以不好用
这两行其实就是控制这个隐藏的
我们呀找到这个tooltip里边的
这个方法handle close popper
把这个方法也给它设置成一个空方法
设空方法之前呢
我们也把它备份到一个变量里
然后同样的keyup再把它还原回来
就是这个道理
我先把这个还原回来
好这个我们再来试一下
大家看 鼠标移出它也没有问题了
好那为什么这两个操作
可以实现这个效果呢
就是一个是删到这个tooltip
一个是把这个方法
设置成一个空方法
我们先来看这个tooltip啊
我们去找到el-table源码
然后呢我们找到里边的tbody
大家看！tbody里边
其实啊它是共用了一个tootip
就说你不管是哪一行哪一列
它只有这一个tooltip
然后呢它始终在更改它这个位置
我们来一个mouse enter
大家看，在这里
它始终在用这一个tootip去重新
计算它这个需要弹开的位置
所以呢我们就从这个方法入手
这个方法就是这个
鼠标移入某一个单元格的方法哈
从这个方法入手
大家看它在这个地方有一个判断
它会弹开这弹出层
然后呢我们往后看
它这有一个并且this.$refs.tooltip
也就是说它
如果有这个REFS引用它就会弹开
所以呢我们在这儿
当鼠标按下的时候我们把它删掉
所以呢
他这个if语句就是一直进不来
当我们鼠标移入其他单元格的时候呢
他也不会弹出新的层了
同时呢
也包括鼠标移出这个当前单元格
它也是有这个判断
大家看有个tooltip
如果有这个tooltip
它就会把这个close掉
所以咱们按住Alt的时候
这个tooltip就为空了
不管是在这移出当前单元格
还是移入其他单元格
这个tooltip都会一直不变
那关于另外一个鼠标移出那个
tip框的时候
那个框会自动隐藏掉
这个解决思路是一样的（区别是这次替换掉的是个方法）
只是呢我们不能把这个方法删掉
因为他有地方在调用所以我们只能把
它设置成一个空方法之后再放回来
思路呢就是这样
我就不给大家详细看代码了
最后更新于