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

短命女 2022-04-05 08:42 550阅读 0赞

### 需求： ###

本篇文章适用于表头同时添加悬浮和排序，另，只需支持文字悬浮对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支持**信息提示**和远程加载**排序**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]

### 问题bug ###

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

### 解决 ###

### 简易解释 ###

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}
          />
        );
      };

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]: /images/20220405/a529ba78ec1f4582b730669e74042317.png