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

对于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',

        },
],

 

然后，结果是怎样呢？

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

 

为什么？

我查了一下，有位简书的作者给出了答案：https://www.jianshu.com/p/b67ca05cf380

如此，我改成了以下的代码，并且新增了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，官网是这样解释的：

 

<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 }}

/>

 

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