如果任何 p 列已有模板,则数据表行扩展不起作用
Datatable row expansion not working if any of the p-column already has a template to it
当列附加了模板时,DataTableRowExpander 不起作用。请参阅下面的代码以供参考。
<p-dataTable [value]="projects" expandableRows="true">
<p-column expander="true" style="width:22px"></p-column>
<p-column field="projectState" [sortable]="true" header="Status"></p-column>
<p-column field="bid" header="BU" [sortable]="true">
<template #col #project="rowData" class="col-md-1">
{{GetBU(project[col.field])}}
</template>
</p-column>
<template #project >
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Vin: </div>
<div class="ui-grid-col-10">{{project.projectState}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
</p-dataTable>
对于仍然遇到此问题的任何人,我可以通过将我的行模板放在列定义之前来修复它:
<p-dataTable>
<template let-item>
<!-- ... -->
</template>
<p-column></p-column>
<p-column>
<template>
<!-- ... -->
</template>
</p-column>
<!-- ... -->
</p-dataTable>
当列附加了模板时,DataTableRowExpander 不起作用。请参阅下面的代码以供参考。
<p-dataTable [value]="projects" expandableRows="true">
<p-column expander="true" style="width:22px"></p-column>
<p-column field="projectState" [sortable]="true" header="Status"></p-column>
<p-column field="bid" header="BU" [sortable]="true">
<template #col #project="rowData" class="col-md-1">
{{GetBU(project[col.field])}}
</template>
</p-column>
<template #project >
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Vin: </div>
<div class="ui-grid-col-10">{{project.projectState}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
</p-dataTable>
对于仍然遇到此问题的任何人,我可以通过将我的行模板放在列定义之前来修复它:
<p-dataTable>
<template let-item>
<!-- ... -->
</template>
<p-column></p-column>
<p-column>
<template>
<!-- ... -->
</template>
</p-column>
<!-- ... -->
</p-dataTable>