antd的table实现鼠标移到某一行显示操作列，出现一个气泡框装着操作按钮

Ant Design (antd) 的 Table 组件提供了一种动态展示列的功能，可以利用 React 的状态管理和组件特性来实现鼠标悬停在某一行时显示操作列。通常的做法包括以下几个步骤：

1. **数据结构准备**：
将数据结构设计成包含普通列和操作列两部分，当需要显示操作列时，操作列默认隐藏。

const dataSource = [
  { key: '1', name: '操作列示例', operations: ['查看', '编辑', '删除'] },
  // 其他数据...
];

2. **Table 组件配置**：
使用 `render` 函数来渲染每一行，并在该函数内处理鼠标悬停事件，通过 `React.createElement` 动态创建操作列元素并插入到当前行的末尾。

import { Popover, Button } from 'antd';

const OperationsColumn = ({ record }) => (
  <Popover placement="bottomRight" title="操作">
    {
      record.operations.map((operation, index) => (
        <Button key={index} type="link">{operation}</Button>
      ))
    }
  </Popover>
);

const CustomRowRenderer = ({ record, ...restProps }) => {
  const [isShowingOperations, setIsShowingOperations] = useState(false);

  return (
    <>
      {/* 正常的列内容 */}
      ...

      {/* 当鼠标悬停时，显示操作列 */}
      <div onMouseEnter={() => setIsShowingOperations(true)} onMouseLeave={() => setIsShowingOperations(false)}>
        {isShowingOperations ? (
          <OperationsColumn record={record} />
        ) : null}
      </div>

    </>
  );
};

<Table columns={['常规列', '...', 'CustomRowRenderer']} dataSource={dataSource} rowClassName={({ record }) => record.key} />

3. **CSS样式调整**：
可能需要一些额外的 CSS 样式来美化气泡框以及确保它在鼠标离开时优雅地关闭。