隐藏在可滚动表头内的下拉值 - Primeng答案

【问题标题】：Dropdown values hidden inside scrollable table header - Primeng隐藏在可滚动表头内的下拉值 - Primeng
【发布时间】：2019-06-18 04:20:19
【问题描述】：

我使用了带有过滤器和冻结列功能的 Primeng p-table（一列被冻结，其余列是可移动的）。在标题中，我将选择下拉列表作为过滤器控件。当我打开下拉菜单时，这些值会被隐藏，如图所示。

由于表头是可滚动的，它具有溢出属性：隐藏。因此，当我删除它时，下拉值会变得可见，但表头不会隐藏，如下所示。

【问题讨论】：

【解决方案1】：

我复制了您的问题。还有一个名为appendTo 的下拉选项。这将很容易解决这个问题。

只需在下拉列表中添加此选项，如下所示：

<p-dropdown appendTo="body" placeholder="Type or Select"></p-dropdown>

就是这样。

第二个选项是：

覆盖下面的 CSS：

.ui-table-scrollable-header.ui-widget-header {
        overflow:visible;
    }

这只是另一个技巧。

【讨论】：

我尝试使用 appendTo 选项，但下拉菜单卡在页面上，并且由于表格是可滚动的，因此列标题会移动到其他位置。使用您的第二个选项，问题发生在我的问题的第二张图片中。谢谢顺便说一句
@tariqzak 你能分享你的代码吗？因为我做了同样的事情，它工作得很好。我也在使用 angular vs 6 和 primeng v6。我想看看你是如何尝试我提到的这些选项的。
确保您没有在方括号内使用appendTo，例如[appendTo]。