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

Question

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

Ant table 的 onRow 回调将允许我获取正在悬停的记录并且 onRowClassName 允许我传递 class 名称以便我可以在悬停的行上动态应用 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
);

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

.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

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

Rendering an action menu in Ant Table on Row hover

reactjs

antd