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>
相关推荐
别跟老夫聊头发几秒前
vue缩放/放大时,实时更新/变换显示高度
vue.js
1024小神1 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录2 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权3 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598244 分钟前
vue3源码解析:调度器
前端·vue.js
Dolphin_海豚26 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件29 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript