antD Table表头气泡提示自定义

最新推荐文章于 2025-09-28 15:24:21 发布

原创最新推荐文章于 2025-09-28 15:24:21 发布 · 4.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #reactjs

react 同时被 3 个专栏收录

7 篇文章

订阅专栏

antD

5 篇文章

订阅专栏

typescript

1 篇文章

订阅专栏

本文介绍如何在Ant Design的Table组件中实现自定义筛选菜单和提示图标，通过使用filterDropdown和filterIcon属性，结合Tooltip组件的onVisibleChange方法，实现动态提示文案的绑定，避免提示内容固定为“筛选”，并提供服务端动态返回table表头和数据的代码实现。

实现效果：
在这里插入图片描述
用到的属性：

filterDropdown:可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互;

filterIcon:自定义 filter 图标。结合Tooltip的onVisibleChange方法（显示隐藏的回调）

locale = {filterTitle:悬浮框显示的提示内容}

思路：
1.为提示图标添加Tooltip，利用ToolTip的显示隐藏回调函数（onVisibleChange），为该图标设置对应的提示文案。

	filterIcon: (
          <Tooltip title="默认" onVisibleChange={() => this.onVisibleChange(item.tipMsg)} placement="top">
            <Icon type="question-circle-o" theme="outlined" />
          </Tooltip>
    ),

	onVisibleChange = (tips: string) => {
    	this.setState({tipMsg: tips});
    };

2.在Table的locale对象中，讲tipMsg的值赋值给filterTitle

    const locale = {
      filterTitle: tipMsg || '默认',
    };

注意事项：
要想实现提示内容的自定义，必须要里用onVisibleChange进行提示内容的绑定，否则提示内容会固定为“筛选”。

最后，附上代码：

背景：服务端动态返回table的表头和展示数据。
接口返回数据结构：

  export type TsearchByMonthInfoSource = {
    fontColor: string;
    showValue: string;
  };
  export type TsearchByMonthInfoHead = {
    headName: string;
    orderFile: string; // 有值说明是排序字段
    orderType: number; // 1：正序 0：倒序
    tipMsg: string;
    isFixed:boolean;
  };
  export type TsearchByMonthInfo = {
    dataSource: TsearchByMonthInfoSource[][]; // table展示数据部分
    tableHead: TsearchByMonthInfoHead[]; // 表头
  };

代码实现：

// 第一步：请求接口，获取数据
    searchAttendanceByMonth({
      curPage,
      dptList, //部门Id列表 ,
      orgId,
      orgList, //结构列表 ,
      pageIndex, // 第几页 ,
      pageSize, //每页几条 ,
      userList, //人员LekeUserId列表
      yearMonth: curMonth ? curMonth.format('YYYY-MM') : '', //年月 ,
    }).then(json => {
      let jsonData = json.data;
        this.getColumns(jsonData.dataList[0] && jsonData.dataList[0].tableHead);
        ...
    });
// 第二步：将表头和table数据对应
  getColumns = (tableHead: TsearchByMonthInfoHead[]) => {
     const columns: ColumnProps<Array<any>>[] = tableHead && tableHead.map((item, index) => {
      return {
        title: item.headName,
        align:'center',
        fixed: item.isFixed ? 'left' : false,
        width: 80,
        filterDropdown: item.tipMsg ? true : false,
        filterIcon: (
          <Tooltip title="默认" onVisibleChange={() => this.onVisibleChange(item.tipMsg)} placement="top">
            <Icon type="question-circle-o" theme="outlined" />
          </Tooltip>
        ),
        render: (_: any, record: any) => {
          const value = record[index].showValue;
          return (
            <div
              title={value ? value : ''}
              className={`${prefixCls}-width-limit`}
            >
              {value}
            </div>
          );
        },
      };
    });

    this.setState({
      columns,
    });
  };