1、效果
2、代码
html
<div style="overflow: scroll; width: 100%;height: calc(100% - 80px);">
<table class="table table-bordered" style="width: auto;table-layout: fixed;">
<thead style="position: sticky;top: -1px;z-index: 1020;">
<tr>
<th style="text-align: center; vertical-align: middle;" rowspan="2">零部件编码</th>
<th style="text-align: center; vertical-align: middle;" rowspan="2">零部件名称</th>
<th style="text-align: center; vertical-align: middle;" colspan="3" ng-repeat="date in dates">
{{date}}
</th>
</tr>
<!--
$scope.dates = ['2024-10-21', '2024-10-22', '2024-10-23', '2024-10-24']
$scope.data = []
for (let i = 0; i < $scope.dates.length; i++) {
$scope.data.push({id: i + 1, name: "送货计划"})
$scope.data.push({id: i + 2, name: '生产计划'})
$scope.data.push({id: i + 3, name: '预计库存'})
}
-->
<tr>
<th ng-repeat="dto in data" style="text-align: center; vertical-align: middle;"
data-key="{{dto.id}}">{{dto.name}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in entity">
<td>{{row.productType}}</td>
<td>{{row.productCode}}</td>
<td ng-repeat="dto in row.list" data-key="{{dto.id}}">{{dto.name}}</td>
<!--
$scope.entity.forEach(item => {
let list = []
for (let i = 0; i < $scope.dates.length; i++) {
list.push({id: i + 1, name: item.productName})
list.push({id: i + 2, name: item.total})
list.push({id: i + 3, name: item.undeliveredCount})
}
item.list = list
})
-->
</tr>
</tbody>
</table>
</div>