基于vue实现动态table

news2024/11/25 16:19:01

1、代码

        <div style="height: 600px; overflow: scroll;">
<!-- height: 600px; overflow: scroll;作用是超出页面可以滑动 -->
            <div ng-repeat="row in entity.procedureList">
                <cb-title title="工序{{row.procedireLocation}}" class="table-primary"></cb-title>
                <table class='table table-bordered'>
                    <thead>
                    <tr>
                        <th style='width: 160px;'>零部件编码</th>
                        <th style='width: 220px;'>零部件名称</th>
                        <th style='width: 600px;'>关键零部件条码</th>
                        <th style='width: 70px;'>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat='dto in row.procedureList'>
                        <td class="table-light">
                            {{dto.oemCode}}
                        </td>
                        <td class="table-light">
                            {{dto.oemName}}
                        </td>
                        <td class="table-light">
                            {{dto.componentBarcode}}
                        </td>
                        <td class="table-light">
                            <button class='btn btn-link btn-warning' ng-click='ctrl.replace(dto)' type='button'
                                    style="color: #007bff;">
                                替换
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

2、效果

3、源数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1563542.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

空窗期并非求职大忌!测试人这么回答轻松拿到offer!

为啥今天想起这个话题呢&#xff0c;因为我之前有过这样的经历&#xff0c;且身边的小伙伴也频频遇到面试官来这么个灵魂拷问&#xff0c;所以觉得这点其实还挺重要的&#xff0c;特来分享一下我的应对之策。 既然问题出来了&#xff0c;我们就要弄懂它的来龙去脉&#xff0c;…

[mmu/cache]-ARM MMU的学习笔记-一篇就够了

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; ARMV8-aarch64的MMU 1、MMU概念介绍 MMU分为两个部分: TLB maintenance 和 address translation MMU的作用&#xff0c;主要是完成地址的翻译&#xff0c;无论是main-memory地…

Node.js-知识点学习总结归纳

Node.js-知识点学习总结归纳 安装nodenode运行方式通过Node.js直接运行js文件&#xff08;也就不用通过网页html了&#xff09;绝对路径调用:相对路径调用&#xff1a;直接运行js命令&#xff1a; Vscode控制台使用node运行js文件 安装node 这个就不用讲了吧&#xff0c;网上搜…

mac mini m1芯片 Xcode 15.3 各种报错的问题

错误一&#xff1a; /Users/mac/Desktop/Test_project/mobile-ios/Test/Test-Bridging-Header.h:4:9 failed to emit precompiled header /Users/mac/Library/Developer/Xcode/DerivedData/App-apvcgkuclncgfqdlzqcoffyaexos/Build/Intermediates.noindex/PrecompiledHeaders/…

[Linux]基础IO(上)--理解文件系统调用、文件描述符、万物皆文件

一、文件的理解 每种语言都有进行文件操作的函数接口&#xff0c;例如C语言的fopen、fwrite、fprintf等等&#xff0c;但是进行文件操作的前提是代码已经跑起来&#xff0c;因为文件的打开与关闭要通过CPU来运行程序代码&#xff0c;所以打开文件的本质是进程打开文件&#xff…

day01 51单片机

51单片机学习 1 51单片机概述 1.1 51单片机简介 目前使用的51单片机一般是宏晶STC89系列,这其中流传最广的版本,也是我们课程的主角,就是STC89C52RC。 1.2 命名规则 1.3 单片机最小应用系统 2 点亮LED灯 2.1 硬件原理图 这个原理图非常简单,VCC接保护电阻R1,串联LED1最…

企业周年庆3d云展厅促进了客企间交流与互动

在数字化浪潮席卷而来的今天&#xff0c;传统的展示方式已难以满足现代人对信息获取与体验的高标准需求。为此&#xff0c;一种革命性的展示方式——线上3D虚拟展厅应运而生&#xff0c;以其独特的魅力逐渐引领展示方式的革新。 线上3D虚拟展厅开发&#xff0c;不仅为参与者带来…

突破编程_前端_JS编程实例(分割窗体组件)

1 开发目标 分隔窗体组件旨在提供灵活的窗体分隔功能&#xff0c;支持横向分割与纵向分隔两种类型&#xff0c;并具备拖拽调整窗体比例的功能&#xff0c;同时提供最小比例设置&#xff0c;以防止窗体被过度缩小&#xff1a; 2 详细需求 2.1 分隔窗体类型 &#xff08;1&…

软件工程学习笔记14——案例解析篇

案例解析篇 一、大型开源项目对软件工程的应用1、开发迭代过程 二、大厂是怎样应用软件工程的1、软件项目开发团队组成&#xff08;1&#xff09;软件开发团队规模小&#xff08;2&#xff09;没有专职测试&#xff08;3&#xff09;DevOps 文化 2、开发工具的使用3、项目开发流…

结构体,联合体,枚举( 2 )

目录 2.联合体 2.1联合体类型的声明 2.2联合体的特点 2.3联合体的内存大小 3.枚举 3.1枚举类型的声明 3.2枚举类型的优点 3.3枚举类型的使用 2.联合体 联合体&#xff08;Union&#xff09;是另一种复合数据类型&#xff0c;它允许我们在同一内存位置存储不同的数据类型…

PyYAML,一个强大的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个强大的 Python 库 - pyyaml。 Github地址&#xff1a;https://github.com/yaml/pyyaml/ 在处理配置文件、序列化数据等场景中&#xff0c;YAML&#xff08;YAML Ain’t Ma…

雷勒过滤与您相约2024第13届生物发酵展

参展企业介绍 青岛雷勒过滤科技有限公司是一家致力于不锈钢过滤网&#xff0c;涂料筛&#xff0c;滤袋等研发、生产和服务一体的综合型公司。雷勒专业生产各种高品质的不锈钢过滤元件&#xff0c;用于各种关键的过滤与分离环节。 雷勒拥有先进的生产设备&#xff0c;完善的产…

BGP-BGP选路、BGP4+

BGP-BGP选路&#xff0c;BGP4 支持IPv6的BGP&#xff0c;又称为MP-BGP&#xff0c;BGP4 BGP&#xff1a;外部网关协议、使用TCP作为其传输层协议、支持CIDR、增量更新、路径矢量路由协议、无环路、路由策略丰富、可防止路由震荡、易于扩展。 BGP工作原理——报文类型&#x…

信捷 XD/XL plc 单精度/双精度浮点数比较 ECMP,EDCMP

对于单精度浮点数&#xff0c;用ECMP指令。 对于双精度浮点数&#xff0c;用EDCMP指令 注意&#xff1a;EDCMP 指令中寄存器的首地址必须为偶数。

教育信创 | 云轴科技ZStack联合飞腾发布全场景教育信创白皮书

随着数字化时代的到来&#xff0c;教育行业正面临着前所未有的挑战与机遇。为了推动教育行业的数字化转型和信创人才培养&#xff0c;云轴科技ZStack联合飞腾于3月28日正式发布了《教育行业数字化自主创新飞腾生态解决方案白皮书》&#xff08;简称《教育白皮书》&#xff09;。…

Day57:WEB攻防-SSRF服务端请求Gopher伪协议无回显利用黑白盒挖掘业务功能点

目录 SSRF-原理&挖掘&利用&修复 SSRF无回显解决办法 SSRF漏洞挖掘 SSRF协议利用 http:// &#xff08;常用&#xff09; file:/// &#xff08;常用&#xff09; dict:// &#xff08;常用&#xff09; sftp:// ldap:// tftp:// gopher:// &#xff08;…

Python中的全栈开发前端与后端的完美融合【第160篇—全栈开发】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python中的全栈开发&#xff1a;前端与后端的完美融合 全栈开发已成为当今软件开发领域中的…

YOLOv9有效改进专栏汇总|未来更新卷积、主干、检测头注意力机制、特征融合方式等创新![2024/4/1]

​ 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 专栏介绍 YOLOv9作为最新的YOLO系列模型&#xff0c;对于做目标检测的同学是必不可少的。本专栏将针对2024年最新推出的YOLOv9检测模型&#xff0…

Java数据结构-栈

目录 1. 栈的概念2. 栈的实现2.1 顺序栈2.2 链式栈 3. 栈的应用3.1 栈的使用3.2 括号匹配3.3 逆波兰表达式求值3.4 出栈入栈次序匹配3.4 最小栈 1. 栈的概念 栈是一种顺序结构&#xff0c;只允许在一端进行插入和删除&#xff0c;插入删除的一端叫栈顶&#xff0c;另一端叫栈底…

蓝桥杯嵌入式学习笔记(7):ADC程序设计

目录 前言 1. ADC原理 1.1 主要特性 1.2 模拟输出电路图 2. 使用CubeMX进行源工程的配置 2.1 引脚配置 2.2 配置AD1 2.3 配置AD2 2.4 配置时钟 3. 代码编程 3.1 预备工作 3.2 bsp_adc.h文件编写 3.3 bsp_adc.c文件编写 3.4 main.c编写 3.4.1 时钟函数配置 3…