鼠标移入antd表格当前行显示问文字提示

Question

使用antd表格，如何实现：鼠标移入表格当前行时候显示a-tooltip的文字提示，如图，现在只能鼠标移入姓名时候显示，如何让鼠标移入当前行的时候就显示文字提示，研究了很久，使用 #customRow="record"不生效，请问如何处理？知道的解答一下，十分感谢！

Answer 1

要在Ant Design的表格中实现鼠标移入当前行时显示文字提示，你可以使用onMouseEnter和onMouseLeave事件来监听鼠标移入和移出行的事件，并在事件处理程序中设置当前行的状态。然后，你可以根据当前行的状态来决定是否显示Tooltip组件。

以下是一个示例代码，演示了如何在Ant Design的表格中实现鼠标移入当前行时显示文字提示：

import React, { useState } from 'react';
import { Table, Tooltip } from 'antd';

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
];

const App = () => {
  const [hoveredRow, setHoveredRow] = useState(null);

  const handleMouseEnter = (record) => {
    setHoveredRow(record.id);
  };

  const handleMouseLeave = () => {
    setHoveredRow(null);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <Tooltip title={text} visible={hoveredRow === record.id}>
          <span onMouseEnter={() => handleMouseEnter(record)} onMouseLeave={handleMouseLeave}>
            {text}
          </span>
        </Tooltip>
      ),
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
  ];

  return <Table dataSource={data} columns={columns} />;
};

export default App;

在上述代码中，我们使用了useState钩子来定义了一个hoveredRow状态，用于记录当前鼠标悬停的行的ID。然后，我们在handleMouseEnter和handleMouseLeave事件处理程序中更新hoveredRow状态。

在表格的render方法中，我们使用Tooltip组件来显示文字提示。我们通过将visible属性设置为hoveredRow === record.id来控制提示框的显示与隐藏。当鼠标移入姓名单元格时，我们调用handleMouseEnter方法来更新hoveredRow状态，并在鼠标移出时调用handleMouseLeave方法。

这样，当鼠标移入当前行时，文字提示将显示出来。

希望这个示例能够帮助到你！