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>
相关推荐
天天扭码13 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder16 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte20 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang25 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神2 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂2 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端