<p-table [value]="salesOrderList" stripedRows class="w-full" dataKey="vehicleSeq"
[expandedRowKeys]="expandedRows">
<ng-template #header>
<tr>
<th>工厂</th>
<th class="fontLine" style="min-width: 100px">装货日期</th>
<th class="fontLine" style="min-width: 100px">发货日期</th>
<th class="fontLine" style="min-width: 100px">车牌号</th>
<th class="fontLine" style="min-width: 100px">车次</th>
<th class="fontLine" style="min-width: 100px">优先级</th>
<th class="fontLine" style="min-width: 100px">拼车</th>
<th class="fontLine" style="min-width: 100px">计划到库</th>
<th class="fontLine" style="min-width: 100px">到库时间</th>
<th class="fontLine" style="min-width: 100px">状态</th>
</tr>
</ng-template>
<ng-template #body let-product let-expanded="expanded">
<tr>
<
td>
<div class="flex gap-2 items-center">
<button (click)="!expanded ? onClickSalesOrderDetail(product) : null" pButton
class="text-sm" pRipple [pRowToggler]="product" [text]="true" [rounded]="true"
[plain]="true" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
style="padding-right: 6px;"></button>
<span>{{ product.factoryName }}</span>
</div>
</
td>
<
td>{{ product.loadDate }}</
td>
<
td>{{ product.deliveryDate }}</
td>
<
td>{{ product.vehicleNo }}</
td>
<
td>{{ product.vehicleSeq }}</
td>
<
td>
<p-select class="w-full" [(ngModel)]="product.priority" [options]="priorityList" optionLabel="dicName"
optionValue="dicCode" [appendTo]="'body'">
</p-select>
</
td>
<
td>{{ product.isCarpool ? '是' : '否' }}</
td>
<
td>{{ product.planArrivalTime }}</
td>
<
td>{{ product.actualArrivalTime }}</
td>
<
td>
<div class="py-1 rounded text-center"
[ngClass]="{'status-done': (product.status | salesOrderStatus) === '已装车','status-warning': (product.status | salesOrderStatus) === '待通知','status-error': (product.status | salesOrderStatus) === '待排序'}">
{{ product.status | salesOrderStatus }}</div>
</
td>
</tr>
</ng-template>
<ng-template #expandedrow let-product>
<tr>
<
td colspan="100%" class="bg-white !pl-8 !pr-0">
<div class="pl-6" style="border-left: 1px #c30001 solid">
<p-table [value]="salesOrderDetail" class="wareList">
<ng-template #header>
<tr>
<th>发货仓库</th>
<th class="fontLine">备货单</th>
<th class="fontLine">合同</th>
<th class="fontLine">到货日期</th>
<th class="fontLine">商业公司</th>
<th class="fontLine">装载顺序</th>
<th class="fontLine">批次</th>
<th class="fontLine">物料编号</th>
<th class="fontLine">物料描述</th>
<th class="fontLine">数量</th>
</tr>
</ng-template>
<ng-template #body let-order>
<tr>
<
td>{{ order.deliveryWarehouse }}</
td>
<
td>{{ order.packingList }}</
td>
<
td>{{ order.contractNo }}</
td>
<
td>{{ order.arrivalDate }}</
td>
<
td>{{ order.businessCompany }}</
td>
<
td>{{ order.loadingOrder }}</
td>
<
td>{{ order.batchNo }}</
td>
<
td>{{ order.materialCode }}</
td>
<
td>{{ order.materialDesc }}</
td>
<
td>{{ order.quantity }}</
td>
</tr>
</ng-template>
</p-table>
我的html是这样的结构
本文介绍了如何使用table-layout属性来固定表格布局，并通过设置td元素的nowrap样式及overflow等属性实现内容溢出时的省略显示效果。此外，还介绍了title属性的作用，即当鼠标悬停在单元格上时显示完整内容。
扫一扫
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
