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，官网是这样解释的：
<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和气泡提示的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: