html+vue实现动态复杂table

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>
相关推荐
前端 贾公子11 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB242 小时前
html复习
javascript·microsoft·html
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控