javascript - 如何将p下拉列表放到表格单元格内部？

我正在将p下拉列表添加到类似于在此处看到的p表中:https://www.primefaces.org/primeng/#/table/filter

p下拉列表溢出到下一个单元格中。如何防止p下拉列表流到下一个单元格？

我尝试了以下方法:
-将[style] =“{'width':'100％'}”添加到p下拉元素
-将[autoWidth] =“true”添加到p-dropdown元素
-将最大宽度添加到p-dropdown元素

<p-table [columns]="cols" [value]="wfdata" [paginator]="true" [rows]="10">

...

<th *ngFor="let col of cols" [ngSwitch]="col.value">
          <p-dropdown *ngSwitchCase="'invoice_status'"
                    [options]="statuses"
                    [autoWidth]="true"
                    [style]="{'width':'100%'}"></p-dropdown>

...

</p-table>

最佳答案

在p-dropdown组件内部有一个.ui-dropdown类，它将min-width设置为固定值12.5em;，因此，如果将最小宽度设置为0或initial，则可以解决此问题

style.scss

.base-table {
  p-dropdown {
    .ui-dropdown {
      min-width:0;
    }
  }
}

否则将重置all元素中p-dropdown组件的最小宽度

 p-dropdown {
    .ui-dropdown {
      min-width:0; // auto , initial 😀
    }
  }

demo 🔥🔥