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>
相关推荐
菌菇汤1 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶9 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_4116719828 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck2 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室4 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子5 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存