下拉菜单未显示在表格上：Tailwind、React

Question

大家好，我是 Tailwind 的新手。

我正在制作一个可见的下拉菜单，它位于表格单元格中，但它位于表格下方，不会溢出表格滚动条之外。我的桌子是一个水平滚动的桌子。我z-index尽可能多地给出下拉列表。但它不起作用。请帮忙。

TableBody.jsx

import React from 'react';
import _ from 'lodash';
import TableCell from './tableCell';
import Popup from './popup';

const popupItems = [{ label: 'Edit'}, { label: 'Delete' }];

const TableBody = ({
  rows,
  hiddenColumns,
  checkedItems,
  addCheckedItem,
  removeCheckedItem,
}) => {
  const handleToggle = (event, checkedItem) => {
    if (event.target.checked) {
      addCheckedItem(checkedItem);
    } else {
      removeCheckedItem(checkedItem);
    }
  };

  return (
    <tbody>
      {rows.map((item, index) => (
        <tr key={index} className="hover:bg-gray-100 cursor-pointer">
          <td>
            <div className="relative">
              <Popup items={popupItems} />
            </div>
          </td>
          <TableCell value={index + 1} />
          {_.entries(item).map((pairs, value) => {
            if (hiddenColumns && !hiddenColumns.includes(pairs[0])) {
              return <TableCell key={value} value={pairs[1]} />;
            }
          })}
        </tr>
      ))}
    </tbody>
  );
};

export default TableBody;

Popup.jsx

import React from 'react';

const Popup = ({ items }) => {
  return (
    <div className="absolute left-0 bg-white p-2 mt-1 rounded-lg shadow-md border z-50">
      {items.map((item) => (
        <div
          key={item.label}
          className="bg-indigo-200"
        >
          <span className="px-3 align-middle text-xs">{item.label}</span>
        </div>
      ))}
    </div>
  );
};

export default Popup;

Answer 1

如果我正确理解了这个问题，您尝试创建的菜单会被滚动条切断吗？

您应该能够通过overflow-visible在整个表上使用来解决该问题。 https://tailwindcss.com/docs/overflow

主要问题不在于弹出窗口位于表格下方，而在于表格的 div 内容一旦位于 div 外部，就会“切断”内容。