uniapp 表格,动态表头表格封装渲染

1.接口表格数据:

{"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name": "v4","order": 1,"hide": false,"dateTypeValue": "/sso-management/department/getDepById?"},{"label": "实例状态","name": "v3","order": 1,"hide": false,"dateTypeValue": "/cmdb/dict/query?args=example_state&"},{"label": "esc_Ip","name": "v2","order": 1,"hide": false,"dateTypeValue": null},{"label": "测试1","name": "test1","order": 1,"hide": false,"dateTypeValue": null},{"label": "测试2","name": "test2","order": 1,"hide": false,"dateTypeValue": null},{"label": "测试3","name": "test3","order": 1,"hide": false,"dateTypeValue": null}],"bodyData": {"total": 4,"list": [{"test2": null,"test3": null,"v1": "ESC_001","v2": "127.0.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 1},{"test2": null,"test3": null,"v1": "ESC_002","v2": "127.0.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 2},{"test2": null,"test3": null,"v1": "ESC_003","v2": "127.0.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 3},{"test2": null,"test3": null,"v1": "ESC_004","v2": "192.168.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 4}],"pageNum": 1,"pageSize": 4,"size": 4,"startRow": 0,"endRow": 3,"pages": 1,"prePage": 0,"nextPage": 0,"isFirstPage": true,"isLastPage": true,"hasPreviousPage": false,"hasNextPage": false,"navigatePages": 8,"navigatepageNums": [1],"navigateFirstPage": 1,"navigateLastPage": 1,"firstPage": 1,"lastPage": 1}
}

2.结构:(表格内容渲染注意,需要先循环表格数据tr代表有多少行数据,再循环表头数据td取对应的字段内容,渲染)

<view class="tableStyle"><table><th><td v-for="(header, index) in tableInfo.columns" :key="index">{{ header.label }}</td></th><tr v-for="(item, i) in tableInfo.list" :key="i" @click="goToDetail(item)"><td v-for="(header, index) in tableInfo.columns" :key="index">{{item[header['name']] }}</td></tr></table></view>

3.样式

.tableStyle {width: 100%;margin-top: 40rpx;padding-top: 20rpx;background-color: #fff;overflow-y: hidden;overflow-x: auto;table {width: 100% !important;}th {width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;font-weight: 550;color: #2F80ED;font-size: 14px;padding: 12px 4px;background: #F3F6FA;td {display: inline-block;min-width: 100px;text-align: center;}}tr {width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;font-size: 14px;font-weight: 400;padding: 12px 4px;td {text-align: center;font-size: 14px;font-weight: 400;display: inline-block;min-width: 100px;text-align: center;}&:nth-child(2n+1) {background: #F3F6FA;}}}

二、第二种方式,用uni-table组件渲染

官网uniapp-table组件地址:uni-app官网

1.结构:

<view class="uni-container"><uni-table ref="table" border stripe emptyText="暂无更多数据"><uni-tr><uni-th align="center" v-for="(header, index) in tableInfo.columns":key="index">{{header.label}}</uni-th></uni-tr><uni-tr v-for="(item, i) in tableInfo.list" :key="i" @click="goToDetail(item)"><uni-td align="center" v-for="(header, index) in tableInfo.columns" :key="index">{{item[header['name']] }}</uni-td></uni-tr></uni-table></view>

2.数据同上

3.渲染完成

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[从0开始轨迹预测][NMS]:NMS的应用(目标检测、轨迹预测)

非极大值抑制&#xff08;Non-Maximum Suppression&#xff0c;简称NMS&#xff09;是一种在计算机视觉中广泛应用的算法&#xff0c;主要用于消除冗余和重叠的边界框。在目标检测任务中&#xff0c;尤其是在使用诸如R-CNN系列的算法时&#xff0c;会产生大量的候选区域&#x…

【Linux进阶】文件系统3——目录树,挂载

前言 在Windows 系统重新安装之前&#xff0c;你可能会事先考虑&#xff0c;到底系统盘C盘要有多大容量&#xff1f;而数据盘D盘又要给多大容量等&#xff0c;然后实际安装的时候&#xff0c;你会发现其实C盘之前会有个100MB的分区被独立出来&#xff0c;所以实际上你就会有三个…

10、matlab中字符、数字、矩阵、字符串和元胞合并为字符串并将字符串以不同格式写入读出excel

1、前言 在 MATLAB 中&#xff0c;可以使用不同的数据类型&#xff08;字符、数字、矩阵、字符串和元胞&#xff09;合并为字符串&#xff0c;然后将字符串以不同格式写入 Excel 文件。 以下是一个示例代码&#xff0c;展示如何将不同数据类型合并为字符串&#xff0c;并以不…

ElementPlusError: [ElPagination] 你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档 - 报警告之一

一、问题描述&#xff1a; 今天在使用elementui plus的时候遇到了一个奇葩的问题&#xff0c; 就是提示 使用了一些已被废弃的用法&#xff0c; 奇葩就在于我是 复制另一个页面的分页&#xff0c; 一摸一样的东西&#xff0c;就只这个页面报错&#xff0c; 分页也不出 为了这个…

C# Bitmap类型与Byte[]类型相互转化详解与示例

文章目录 一、Bitmap类型转Byte[]类型使用Bitmap类的Save方法使用Bitmap类的GetBytes方法 二、Byte[]类型转Bitmap类型使用MemoryStream将Byte[]数组转换为Bitmap对象使用System.Drawing.Imaging.BitmapImage类 总结 在C#编程中&#xff0c;Bitmap类型和Byte[]类型之间的相互转…

运动爱好者的新选择:哈氪聆光气传导耳机,轻巧又安全

平时不管是漫步街头、骑行穿梭&#xff0c;还是乘坐公共交通时&#xff0c;我总是喜欢佩戴耳机&#xff0c;借此隔绝外部的喧嚣&#xff0c;享受音乐的乐趣。在户外使用耳机&#xff0c;我更倾向于选择气传导耳机&#xff0c;它们更符合我的需求&#xff0c;因为这种耳机能让我…

在 PostgreSQL 里如何处理数据的版本跟踪和回滚?

文章目录 一、事务二、保存点三、使用版本控制扩展四、审计表和触发器五、使用时间戳列六、比较和还原数据七、考虑数据备份和恢复八、结论 在数据库管理中&#xff0c;数据的版本跟踪和回滚是非常重要的功能&#xff0c;有助于在数据操作出现错误或需要回滚到特定状态时进行有…

Mysql笔记-v2

零、 help、\h、? 调出帮助 mysql> \hFor information about MySQL products and services, visit:http://www.mysql.com/ For developer information, including the MySQL Reference Manual, visit:http://dev.mysql.com/ To buy MySQL Enterprise support, training, …

Windows11配置WSL2支持代理上网

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、安装WSL2分发版二、配置步骤三、测试总结 前言 说起来本来这个功能我也不需要的&#xff0c;只是最近突然有个需求就顺便研究了下&#xff0c;WSL2默认的网…

Dynamics365 UCI下的高级查找(不要留恋Classic了)

UCI界面已经用了多年了&#xff0c;在Classic下的的高级查找按钮(漏斗icon)已不见踪影 但因为使用习惯问题&#xff0c;还是有人会通过右上角高级设置&#xff0c;进入Classic界面找到漏斗Icon来使用高级查找 但新的UCI风格下已经没了高级查找的概念&#xff0c;取而代之的是基…

评估测试用例有效性 5个方面

评估测试用例的有效性是确保软件测试活动能够达到预期目标的关键步骤&#xff0c;有助于测试团队优化测试计划&#xff0c;提高测试效率&#xff0c;减少返工&#xff0c;节省成本。如果缺乏对测试用例的有效性评估&#xff0c;可能会导致测试用例无法覆盖关键功能点&#xff0…

python爬虫基础入门

步骤 获取网页内容&#xff1a; http请求 python的Requests库 解析网页内容 html网页结构 python的Beautiful Soup库 储存或分析数据 储存进数据库 作为ai分析的数据 转化为图表显示出来 DDoS攻击 通过给服务器发送海量高频请求&#xff0c;大量消耗网页资源&#…

JavaScript-日期对象

日期对象 作用&#xff1a;用来表示时间的对象 获取当前时间 const datenew Date();console.log(date);可以得到日期对象&#xff0c;里面的属性有星期&#xff0c;年月日&#xff0c;时分秒 获取指定时间 const datenew Date(2023-05-01);console.log(date); 获取时间戳 时间…

【论文阅读】AsyncDiff: Parallelizing Diffusion Models by Asynchronous Denoising

论文&#xff1a;2406.06911 (arxiv.org) 代码&#xff1a;czg1225/AsyncDiff: Official implementation of "AsyncDiff: Parallelizing Diffusion Models by Asynchronous Denoising" (github.com) 简介 异步去噪并行化扩散模型。提出了一种新的扩散模型分布式加…

Hospital Management Startup 1.0 SQL 注入漏洞(CVE-2022-23366)

前言 CVE-2022-23366是一个影响HMS v1.0的SQL注入漏洞。该漏洞存在于patientlogin.php文件中&#xff0c;允许攻击者通过特定的SQL注入来获取或修改数据库中的敏感信息。 具体来说&#xff0c;攻击者可以通过向patientlogin.php发送恶意构造的SQL语句来绕过身份验证&#xff…

Chiasmodon:一款针对域名安全的公开资源情报OSINT工具

关于Chiasmodon Chiasmodon是一款针对域名安全的公开资源情报OSINT工具&#xff0c;该工具可以帮助广大研究人员从各种来源收集目标域名的相关信息&#xff0c;并根据域名、Google Play应用程序、电子邮件地址、IP地址、组织和URL等信息进行有针对性的数据收集。 该工具可以提…

语义分割和实例分割区别?

语义分割&#xff1a;将图像中的每个像素分配给其对应的语义类别&#xff0c;其主要针对于像素&#xff0c;或者说它是像素级别的图像分割方法。&#xff1a;语义分割的目的是为了从像素级别理解图像的内容&#xff0c;并为图像中的每个像素分配一个对象类。 实例分割&#xf…

Cesium版本升级webgl问题,glsl代码关键字修改

简介 Cesium 从1.102.0 开始&#xff0c;Cesium 默认使用 WebGL2 上下文。一些webgl特效代码在webgl1中支持&#xff0c;但是在版本升级后&#xff0c;运行会报各种glsl代码错误。现在有两种解决方案。详细办法描述如下所示。 1、修改配置使用WebGL1 地球初始化配置如下&…

Vue CoreVideoPlayer 一款基于 vue.js 的轻量级、优秀的视频播放器组件

大家好,我是程序视点的小二哥!今天小二哥给大家推荐一款非常优秀的视频播放组件 效果欣赏 介绍 Vue-CoreVideoPlayer 一款基于vue.js的轻量级的视频播放器插件。 采用Adobd XD进行UI设计&#xff0c;支持移动端适配,不仅功能强大&#xff0c;颜值也是超一流&#xff01; Vue-…

我们公司落地大模型的路径、方法和坑

我们公司落地大模型的路径、方法和坑 李木子 AI大模型实验室 2024年07月02日 18:35 北京 最近一年&#xff0c;LLM&#xff08;大型语言模型&#xff09;已经成熟到可以投入实际应用中了。预计到 2025 年&#xff0c;AI 领域的投资会飙升到 2000 亿美元。现在&#xff0c;不只…