在行悬停时在 Ant Table 中渲染操作菜单

Question

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

Ant 表的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;
}

这是更新后的codesandbox： https://codesandbox.io/s/custom-context-menu-table-antd-forked-b6y5c