在Ant Table中行悬停时呈现操作菜单

在Ant Table中，当行悬停时呈现操作菜单是一种常见的用户交互设计，它可以提供更多的操作选项和便利性。当用户将鼠标悬停在表格的某一行上时，会出现一个操作菜单，用户可以通过点击菜单中的选项来执行相应的操作。

这种功能在很多场景中都非常有用，特别是在需要对表格中的数据进行操作时。例如，在一个订单管理系统中，当用户悬停在某个订单的行上时，可以显示一个操作菜单，包含查看订单详情、编辑订单、删除订单等选项，用户可以直接点击菜单中的选项来执行相应的操作，提高了操作的效率和便捷性。

对于Ant Design的Table组件，可以通过自定义render函数来实现行悬停时呈现操作菜单的功能。具体步骤如下：

在Table组件中，通过设置onRow属性来定义行的行为，例如：

<Table
  dataSource={dataSource}
  columns={columns}
  onRow={(record, index) => ({
    onMouseEnter: () => {
      // 鼠标进入行时的操作
    },
    onMouseLeave: () => {
      // 鼠标离开行时的操作
    },
  })}
/>

在onMouseEnter回调函数中，可以设置一个状态来标记当前行是否悬停，并在render函数中根据该状态来渲染操作菜单。例如：

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

const handleMouseEnter = (record, index) => {
  setHoveredRow(index);
};

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

<Table
  dataSource={dataSource}
  columns={columns}
  onRow={(record, index) => ({
    onMouseEnter: () => handleMouseEnter(record, index),
    onMouseLeave: handleMouseLeave,
  })}
  rowClassName={(record, index) =>
    index === hoveredRow ? 'hovered-row' : ''
  }
  // 其他配置项
/>

在render函数中，根据hoveredRow状态来判断是否渲染操作菜单。例如：

const columns = [
  // 其他列配置
  {
    title: '操作',
    dataIndex: 'actions',
    render: (text, record, index) =>
      index === hoveredRow ? (
        <Menu>
          <Menu.Item key="view">查看</Menu.Item>
          <Menu.Item key="edit">编辑</Menu.Item>
          <Menu.Item key="delete">删除</Menu.Item>
        </Menu>
      ) : null,
  },
];

通过以上步骤，就可以在Ant Table中实现行悬停时呈现操作菜单的功能了。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版（TencentDB for MySQL）等。您可以通过访问腾讯云官网了解更多产品信息和详细介绍。

参考链接：