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

Question

我正在使用 Ant 表来显示一些数据。到目前为止，除了我需要在特定行悬停时显示操作菜单的要求之外，一切都很好。这是我试图实现的模拟:

Ant table 的onRow回调将允许我获得正在悬停的记录和 onRowClassName允许我传递一个类名，以便我可以在悬停的行上动态应用 css。但是我坚持在行的末尾渲染一个元素，就像您在屏幕截图中看到的那样。
我对如何去做这件事感到有些困惑。我遇到的最接近的是这个上下文菜单实现:https://codesandbox.io/s/rm23kroqyo
感谢任何输入。

Answer 1

一种方法是为操作添加一列并为其添加类名。

export const columns = [
  { title: `Name`, dataIndex: `name` },
  { title: `Age`, dataIndex: `age` },
  { title: `Address`, dataIndex: `address` },
  {
    title: "",
    dataIndex: "actions",
    render: (actions) =>
      actions &&
      actions.map((action) => (
        <a className="action" href>
          {action}
        </a>
      )),
    className: "actions"
  }
];

添加对数据的操作

const dataWithActions = data.map((item) =>
  item.key === "2" ? { ...item, actions: ["Like", "Share"] } : item
);

然后设置它的绝对位置，这样它就不会占用空间

.actions {
  position: absolute;
}

.ant-table-row {
  position: relative;
}

最后在行悬停时定位它

.ant-table-row:hover .actions {
  display: block;
  height: 54px;
  right: 0;
}

这是更新的代码和框:
https://codesandbox.io/s/custom-context-menu-table-antd-forked-b6y5c