解决Antd Table表头加Icon和气泡提示的坑

对于antd table组件的columns数组来说，它需要接受2个属性（filterdropdown，filtericon）才能在表头某个属性旁展示图标icon：

然后，结果是怎样呢？

结果是气泡提示框的文本并不是我们期望的 “气泡悬浮提示文本” ，而是 “筛选” 两个字

为什么？

看这里吧~

react ant design 中如何在表头中加个icon和排序,悬浮icon又触发tooltip

需求：

本篇文章适用于表头同时添加悬浮和排序，另，只需支持文字悬浮对title封一层方法即可eg：

ant design中的table中的thead支持信息提示和远程加载排序。

困难点

ant design 没有提供两者同时存在的api；直接添加sorter，同时对我们的title封装方法，出现点击排序，只会触发单一的一个排序，这不是我们最终达成的结果。那么在不对title做处理的情况下，实现信息提示和排序的方法

解决

样式需要自己去调整

简易解释

ant design table 中 filtericon api 相关的源码解析 ，一些我们未能解决的问题，我们可以通过研究源代码去分析或可供我们

使用的api方法。

有兴趣的同学可以看一看完整的代码，看看实现的具体过程，小编不才，只展示部分实现的过程，详细的原理小编未给出，敬请谅解...

好了~ 回归正题吧！

如此，我改成了以下的代码，并且新增了onvisiblechange方法，新增了state的属性filtertitlekey，并且在table组件属性中增加了locale对象：

这边会有table的一个属性locate，官网是这样解释的：

这样就能正常的显示气泡文本了：

以上这篇解决antd table表头加icon和气泡提示的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。