如圖，想在Table表單中的描述后面加上Icon圖標和氣泡提示Tooltip，第一時間找了AntD文檔，找到搜索功能及相應圖標（filterDropdown和filterIcon），也在百度上找到https://www.jianshu.com/p/b67ca05cf380使用辦法（不推薦）。

但是好麻煩啊，又要加函數又要寫多行代碼，出來后的效果也不好看，于是就自己亂寫&fs%W3q……

import React, { Component } from 'react'; import { Table, Tooltip } from 'antd'; import { InfoCircleOutlined } from '@ant-design/icons';class UserTable extends Component {constructor(props) {super(props);this.state = {dataSource: [{id: 200409,userId: 123,userName: '莉茲Liz',userPosition: '魔仙堡',userEmail: '123456@qq.com',userPhone: '18899990000',description: '可可愛愛'}],columns: [{title: '編號',dataIndex: 'id',key: 'id',}, {title: '用戶id',dataIndex: 'userId',key: 'userId'}, {title: '用戶昵稱',dataIndex: 'userName',key: 'userName'}, {title: '所在地區',dataIndex: 'userPosition',key: 'userPosition'}, {title: <div>描述&nbsp;<Tooltip placement='bottom' title='是宇宙無敵小可愛！！！'><InfoCircleOutlined /></Tooltip></div>,dataIndex: 'description',key: 'description',}, {title: '聯系電話',dataIndex: 'userPhone',key: 'userPhone'}, {title: '郵箱',dataIndex: 'userEmail',key: 'userEmail'}],}}render() {const { columns, dataSource } = this.state;return(<div><Tablecolumns={columns}dataSource={dataSource}></Table></div>)} }export default UserTable;

然后它就！真的！！出來啦！！！
每次吐槽AntD的時候它都會給我驚喜，它真的不死板，很好用，當然我也很聰明哈哈哈哈~

提示內容換行

{title: <div>描述&nbsp;<Tooltip placement='bottom' title={<div><span>是宇宙無敵小可愛！！！</span><br/><span>and!</span><br/><span>小聰明！！</span></div>}><InfoCircleOutlined /></Tooltip></div>,dataIndex: 'description',key: 'description', }

注：
是AntD的4.x版本Icon圖標的引用方法，按需加載哈，所以頭部一定不要忘了import；
上面代碼是簡潔版，我又開了個js文件寫的，但是也能出來效果，所以沒加樣式哈。

模板記下來，下次直接用

{title: <div>&nbsp;<Tooltip placement='bottom' title=''><InfoCircleOutlined /></Tooltip></div>,dataIndex: '',key: '', }

總結

以上是生活随笔為你收集整理的AntD的Table表头title加Icon图标和气泡提示Tooltip的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。