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

【问题标题】：Rendering an action menu in Ant Table on Row hover在行悬停时渲染 Ant Table 中的操作菜单
【发布时间】：2021-06-23 18:00:24
【问题描述】：

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

Ant 表的 onRow 回调将允许我获取悬停在上面的记录，onRowClassName 允许我传递一个类名，以便我可以在悬停的行上动态应用 css。但我坚持在行尾渲染一个元素，就像你在屏幕截图中看到的那样。

我对如何去做这件事有点迷茫。我遇到的最接近的是这个上下文菜单实现：https://codesandbox.io/s/rm23kroqyo

感谢任何意见。

【问题讨论】：

标签： reactjs antd

【解决方案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

【讨论】：

我认为值得注意的是，这里接受的答案不支持水平滚动的场景