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

如图，想在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相关推荐

iview表格表头上添加icon图标
需求描述: 如图,在表格表头处添加icon图标,并且鼠标悬浮时有提示语. 解决方案: 使用iview表格中自带的 renderHeader 函数,其用法和 render 类似, 代码: <tem ...
React给antd中TreeSelect组件左侧加自定义图标icon
很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用. 今天碰到了一个很恶心的问题,就是在给antd的treeSelect组件加左侧icon的时候,总是报一个警告, Warning: Each ...
react antd 更改table 表头和表行样式
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识: 1 创建react项目(本实例基于react项目) 2 知道如何导入和调用组件样式效果如下图: 实现方法目录结构: YMColl ...
如何在网页标题栏title加入icon图标？
打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的ico图标呢? 方法一是:找一个或者作一个格式为ico的 ...
Antd如何在label里增加icon图标
要求样式如下: 翻阅了antd文档,没有直接可插入icon的api.后发现label可以传字符串或者组件. 于是采用了封装组件的方式.(强烈建议官方出label可以自带icon的功能) //需要的fo ...
页面title加icon
把favicon.ico放入根目录下,在head中添加一下代码 <link rel="icon" type="image/x-icon" href=&qu ...
在网页title加入icon图标
方法一(被动式): 制作一个ico格式的图片,将图片命名为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了.这样的话浏览 ...
golang打包加icon图标及其他程序信息
安装依赖 go get github.com/akavel/rsrc 示例代码main.go //go:generate rsrc -ico resource/icon.ico -manifest r ...
elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...
{column}) { return h( 'div',// 添加选中事件select (data) { console.log(data);}... 效果如下: 3.在表头添加一个Tooltip 我 ...

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

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

最新文章

热门文章