javascript - 可滚动的 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>