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


Posted in Javascript onNovember 17, 2020

对于Antd Table组件的columns数组来说,它需要接受2个属性(filterDropdown,filterIcon)才能在表头某个属性旁展示图标Icon:

columns: [{
 
 title: '表达式', dataIndex: 'formulaTenderAmount', key: 'formulaTenderAmount', width: 150, placeholder: '请输入表达式', 
 filterDropdown: (<div></div>), 
 filterIcon: <Tooltip placement="top" title="气泡悬浮提示文本" > 
 <Icon type='question-circle-o' style={{ marginLeft: 1 }} />
 
 </Tooltip>,
 
 },{
 
 title: '操作',
 dataIndex: 'operation', 
 key: 'operation', 
 width: 305, 
 fixed: 'right', 
 },
],

然后,结果是怎样呢?

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

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

为什么?

看这里~react ant design 中如何在表头中加个Icon和排序,悬浮icon又触发Tooltip

需求:

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

const TooltipTitle = (text, title) => { // text 展示的thead title 展示的提醒文字
 return (
 <Fragment>
 <span style={{ marginRight: 8 }}>{text}</span>
 <Tooltip placement="top" title={title}>
 <Icon type="question-circle" theme="outlined" />
 </Tooltip>
 </Fragment>
 );
};

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

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

困难点

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

解决

const columns = [{
 title: '姓名',
 dataIndex: 'name',
 key: 'name',
 sorter: true, // 实现排序Icon出现,开始交互排序
 filterDropdown: true, // 自定义的列筛选功能,我们占位为信息提示Icon的位置
 filterIcon: () => {
 return (
 <Tooltip placement="top" onVisibleChange={() => onVisibleChange(1)}>
 // 在这不写title的原因是ant design 内部有很多title,内部结构并没有对特殊的情况做处理,只接收一个title,
 // 并覆盖不了默认是筛选。
 <Icon type="question-circle" theme="outlined" />
 </Tooltip>
 );
 },
}, {
 title: '年龄',
 dataIndex: 'age',
 key: 'age',
}, {
 title: '住址',
 dataIndex: 'address',
 key: 'address',
}];

onVisibleChange = (key) => { //Tooltip 显示隐藏的回调,类似onmouseenter 进入离开事件,用来显示我们不同的信息提醒
 let str = '';
 switch (key) {
 case 1:
 str = '你的姓名';
 default:
 break;
 }
 this.setState({
 filterTitleKey: str,
 });
}

handleTableChange = (pagination, filters, sorter) => {
 console.log(pagination, filters, sorter);
 }

<Table
 dataSource={dataSource}
 columns={columns}
 onChange={() => this.handleTableChange}
 locale={{
 filterTitle: filterTitleKey || '默认', // 设一个默认是防止控制台的报错,移除以后造成filterTitle为空,失败;
 }}
 />

样式需要自己去调整

简易解释

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

使用的api方法。

renderFilterIcon = () => {
 const { column, locale, prefixCls, selectedKeys } = this.props;
 const filtered = selectedKeys && selectedKeys.length > 0;
 let filterIcon = column.filterIcon as any;
 if (typeof filterIcon === 'function') {
 filterIcon = filterIcon(filtered);
 }

 const dropdownIconClass = classNames({
 [`${prefixCls}-selected`]: filtered,
 [`${prefixCls}-open`]: this.getDropdownVisible(),
 });

 return filterIcon ? ( // 重点在这,官网提供了filterIcon api,并未提供filterTitle,来解决我们现实遇到的问题
 React.cloneElement(filterIcon as any, {
 title: locale.filterTitle, // 因源码内部有个title,我们实现让它动态展示,层叠掉默认的title
 className: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.props.className),
 onClick: stopPropagation,
 })
 ) : (
 <Icon
 title={locale.filterTitle} // 同理上,供我们使用的api
 type="filter"
 theme="filled"
 className={dropdownIconClass}
 onClick={stopPropagation}
 />
 );
 };

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

好了~ 回归正题吧!

如此,我改成了以下的代码,并且新增了onVisibleChange方法,新增了state的属性filterTitleKey,并且在Table组件属性中增加了locale对象:

this.state = { 
 filterTitleKey: '', 
}
columns: [{
 
 title: '表达式', dataIndex: 'formulaTenderAmount', key: 'formulaTenderAmount', width: 150, placeholder: '请输入表达式', 
 filterDropdown: (<div></div>), 
 filterIcon: <Tooltip onVisibleChange={() => this.onVisibleChange(1)} placement="top" > 
 <Icon type='question-circle-o' style={{ marginLeft: 1 }} /> 
 </Tooltip>,
 
 },{
 
 title: '操作', 
 dataIndex: 'operation', 
 key: 'operation', 
 width: 305, 
 fixed: 'right', 
 }, 
],
onVisibleChange = (key) => { //Tooltip 显示隐藏的回调,类似onmouseenter 进入离开事件,用来显示我们不同的信息提醒
 
 let str = ''; 
 switch (key) { 
 case 1: 
 str = '函数计算,x表示发行规模'; 
 default: 
 break; 
 }
 
 this.setState({ 
 filterTitleKey: str, 
 }); 
 }

这边会有Table的一个属性locate,官网是这样解释的:

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

<Table
 loading={loading} 
 className='editableTable' 
 size="small" 
 style={{ height: tableHeight - 40 }} 
 columns={columns}
 
 locale={{
 filterTitle: filterTitleKey || '默认', // 设一个默认是防止控制台的报错,移除以后造成filterTitle为空,失败;
 }}
 
 dataSource={dataSource} 
 pagination={pagination} 
 scroll={{ x: 2400, y: tableScrollHeight }} 
/>

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

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

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

以上这篇解决Antd Table表头加Icon和气泡提示的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 #Javascript
ant design pro中可控的筛选和排序实例
Nov 17 #Javascript
antd table按表格里的日期去排序操作
Nov 17 #Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 #Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 #Javascript
详解Vue数据驱动原理
Nov 17 #Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 #Javascript
You might like
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php遍历目录方法小结
2015/03/10 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
实例解析Python中的__new__特殊方法
2016/06/02 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
暑假家长评语大全
2014/04/17 职场文书
大学生社会实践评语
2014/04/25 职场文书
安全环保标语
2014/06/09 职场文书
怎样写观后感
2015/06/19 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS