万万没想到，antd Table 的选择框也能添加 Tooltip？

2023-10-04 20:13:18

在日常开发中，我们经常需要在表格中添加选择框，以方便用户选择数据。antd Table 作为一款流行的 React 表格组件库，提供了丰富的功能和可定制性，但它并不直接支持在选择框中添加 Tooltip。

为了实现这一需求，我们可以通过两种方式：官方解决方案和自定义实现。

官方解决方案

在 antd 4.22.0 版本中，官方已经提供了在选择框中添加 Tooltip 的支持。具体方法如下：

import { Table } from 'antd';

const columns = [
  {
    title: '选择',
    dataIndex: 'select',
    render: (text, record) => (
      <Tooltip title={record.name}>
        <Checkbox />
      </Tooltip>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
  },
];

const App = () => (
  <Table columns={columns} dataSource={data} />
);

export default App;

自定义实现

在 antd 4.22.0 之前的版本中，我们需要通过自定义实现来添加 Tooltip。具体方法如下：

import { Table, Checkbox } from 'antd';

const columns = [
  {
    title: '选择',
    dataIndex: 'select',
    render: (text, record) => (
      <div style={{ position: 'relative' }}>
        <Checkbox />
        <Tooltip title={record.name}>
          <div style={{ position: 'absolute', left: '24px', top: '-4px' }}>
            <i className="anticon anticon-question-circle-o" />
          </div>
        </Tooltip>
      </div>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
  },
];

const App = () => (
  <Table columns={columns} dataSource={data} />
);

export default App;