AntD的Table表头title加Icon图标和气泡提示Tooltip


如图，想在Table表单中的描述后面加上Icon图标和气泡提示Tooltip，第一时间找了AntD文档，找到搜索功能及相应图标（filterDropdown和filterIcon），也在百度上找到https://www.jianshu.com/p/b67ca05cf380使用办法（不推荐）。
在这里插入图片描述
但是好麻烦啊，又要加函数又要写多行代码，出来后的效果也不好看，于是就自己乱写&fs%W3q……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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: '[email protected]',
                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>描述
                    <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>
                <Table
                    columns={columns}
                    dataSource={dataSource}
                ></Table>
            </div>
        )
    }
}

export default UserTable;

然后它就！真的！！出来啦！！！
每次吐槽AntD的时候它都会给我惊喜，它真的不死板，很好用，当然我也很聪明哈哈哈哈~

在这里插入图片描述
注：
是AntD的4.x版本Icon图标的引用方法，按需加载哈，所以头部一定不要忘了import；
上面代码是简洁版，我又开了个js文件写的，但是也能出来效果，所以没加样式哈。

模板记下来，下次直接用

1
2
3
4
5
6
7
8
9
10
{
    title:
    <div>
        <Tooltip placement='bottom' title=''>
            <InfoCircleOutlined />
        </Tooltip>
    </div>,
    dataIndex: '',
    key: '',
}