p-dataTable在页面加载时展开行

Question

p-dataTable在页面加载时展开行

<p-dataTable id="table" class="pc-datatable myTable" #dataTable [value]="dataList" [editable]="true" [rows]="10"
                [responsive]="true" [rowsPerPageOptions]="[5,10,20]" expandableRows="true" [paginator]="true" [pageLinks]="3" expandedIcon="ui-icon-expand-less"
                collapsedIcon="ui-icon-expand-more" rowIndexVar="index">
                <p-column expander="true" [style]="{'width':'0.5%'}"></p-column>
                <p-column field="" [style]="{'width':'15%'}">
                  <ng-template let-ele="rowData" pTemplate="body" let-i="rowIndex">
                    <ng-container>
                      <a style="color:#F5A623; cursor: pointer;" > Route{{i + 1}} ({{ele['name']}}) </a>
                    </ng-container>

                  </ng-template>
                </p-column>

                <ng-template let-rowData pTemplate="rowexpansion" style="width: 100%">
                  <app-view-component [pList]="rowData['pList']"></app-view-component>
                </ng-template>

              </p-dataTable>

请参考所附图像。当前视图是这样

期望这种视图在加载时全部展开

Answer 1

根据PrimeNg文档https://www.primefaces.org/primeng/#/table，您可以对默认的扩展行使用expandRowKeys属性。

所有行最初都会折叠，并提供expandedRowKeys属性（其值是要扩展的行的dataKeys）可以将这些行呈现为已扩展状态。必须为此功能定义一个dataKey。

这是一个演示链接： https://stackblitz.com/edit/primeng-turbo-table-u53rsg