可滚动的primeng数据表模板标题

Question

我有一个数据表

<p-dataTable ... > 
        <p-column field="name" header="Name" [style]="{'width':'250px'}"> 
               <template pTemplate type="header">
            <mycomponent> </mycomponent>
            </template>
    </p-column>
    ...
    </p-dataTable>

当单击打开隐藏的 div 时，Mycomponent 基本上包含一个按钮。 它的作用就像一个模态并且具有绝对定位。 见下图 它工作正常，但如果我添加可滚动选项

<p-dataTable ...  scrollable="true" scrollHeight="200px" scrollWidth="75%">

然后模态框像图片中一样被隐藏。 我没办法把它放在上面。 我尝试使用 z-index 但它不起作用。 你能明白为什么我有这种不同的行为吗？ 谢谢

Answer 1

在您的 p-multiSelect 标记中使用 appendTo="body"。这会将下拉列表添加到您的列标题。

例如：

<p-column field="Description" ...>
<template pTemplate="filter" let-col>
  <p-multiSelect appendTo="body" ... ></p-multiSelect>
</template>