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.mzph.cn/bicheng/42716.shtml

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

相关文章

CentOS 安装 annie/lux,以及 annie/lux 的使用

annie 介绍 如果第一次听到 annie 想必都会觉得陌生&#xff0c;annie 被大家称为视频下载神器&#xff0c;annie 作者介绍说可以下载抖音、哔哩哔哩、优酷、爱奇艺、芒果TV、YouTube、Tumblr、Vimeo 等平台的视频。 githup&#xff1a;https://github.com/pingf/annie 支持…

使用Boost.Asio编写TCP通信程序框架(一)

基于Boost.Asio库编写TCP通信程序框架&#xff1a; 我们首先需要明确几个关键点&#xff1a;节点间如何建立连接、消息如何传输、以及如何处理网络事件。以下是一个简化的设计方案&#xff1a; 1. 设计目标 可扩展性&#xff1a;系统应该能够轻松地添加或移除节点。容错性&…

51单片机嵌入式开发:1、STC89C52环境配置到点亮LED

STC89C52环境配置到点亮LED 1 环境配置1.1 硬件环境1.2 编译环境1.3 烧录环境 2 工程配置2.1 工程框架2.2 工程创建2.3 参数配置 3 点亮一个LED3.1 原理图解读3.2 代码配置3.3 演示 4 总结 1 环境配置 1.1 硬件环境 硬件环境采用“华晴电子”的MINIEL-89C开发板&#xff0c;这…

服务发现与注册:Eureka与Consul

在微服务架构中&#xff0c;服务发现与注册是一个非常重要的部分。通过服务发现机制&#xff0c;微服务能够相互找到并进行通信&#xff0c;而不需要了解彼此的具体地址。本文将详细介绍两种主流的服务发现与注册框架&#xff1a;Eureka和Consul&#xff0c;并提供相应的代码示…

elasticSearch快速了解

elasticSearch&#xff1a;经常用于搜索引擎&#xff0c;我们用的百度搜索和github上的搜索都是用的搜索引擎&#xff0c;它是对输入内容进行分析&#xff0c;然后查询&#xff0c;不像数据库模糊搜索的like一样必须含用你输入的全部内容。 elasticSearch优势&#xff1a;支持…

一文解决:你与该网站的连接不是私密连接,存在安全隐患

访问网页时&#xff0c;是不是会经常遇到网站不是私密连接的提示&#xff1f;当浏览器提示某个网页不安全时&#xff0c;这通常是因为网页使用的是非加密的HTTP协议&#xff0c;或者其HTTPS协议的SSL/TLS证书存在问题。 通常遇到这类网站时要注意&#xff0c;一来是网站未与证书…

`THREE.Line` 是 Three.js 中用于创建线段的类。

demo案例 THREE.Line 是 Three.js 中用于创建线段的类。以下是 THREE.Line 的详细说明&#xff0c;包括构造函数参数、输出、方法和属性。 构造函数 new THREE.Line(geometry, material, mode) geometry (THREE.BufferGeometry 或 THREE.Geometry): 定义线段的几何体。mater…

概率解码:SKlearn中模型的概率预测指南

概率解码&#xff1a;SKlearn中模型的概率预测指南 在机器学习中&#xff0c;概率预测是一种评估样本属于某个类别可能性的方法。这种预测方式不仅提供了分类结果&#xff0c;还给出了预测的置信度。Scikit-learn&#xff08;简称sklearn&#xff09;&#xff0c;作为Python中…

[图解]SysML和EA建模住宅安全系统-12-内部块图

1 00:00:00,580 --> 00:00:02,770 接下来我们来画流了 2 00:00:03,100 --> 00:00:05,050 首先第一个是站点状态 3 00:00:05,140 --> 00:00:08,130 从这里到这里&#xff0c;我们画一个过来 4 00:00:10,290 --> 00:00:11,890 这里流到这里 5 00:00:11,900 -->…

汉中茗茶小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;基础数据管理&#xff0c;茶叶管理&#xff0c;论坛管理&#xff0c;公告管理&#xff0c;茗茶历史管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;茗茶信息&#xf…

探索 WebKit 的分享新境界:Web Share Target API 的深度解析

探索 WebKit 的分享新境界&#xff1a;Web Share Target API 的深度解析 在移动为先的网络世界中&#xff0c;Web Share Target API 为 Web 应用提供了一种简单而强大的方式&#xff0c;允许它们成为分享目标&#xff0c;接收来自其他应用或 Web 应用的内容。作为众多现代浏览…

mac怎么压缩pdf文件大小,mac压缩pdf文件大小不改变清晰度

在数字化时代&#xff0c;pdf格式因其良好的兼容性和稳定性&#xff0c;成为了文档分享和传输的首选。然而&#xff0c;随着文件内容的丰富&#xff0c;pdf文件的体积也越来越大&#xff0c;给存储和传输带来了不小的困扰。本文将揭秘几种简单有效的pdf文件压缩方法&#xff0c…

如何优化 PostgreSQL 中对于自关联表的查询?

文章目录 一、理解自关联表查询二、分析性能问题的可能原因&#xff08;一&#xff09;缺少合适的索引&#xff08;二&#xff09;大量数据的笛卡尔积&#xff08;三&#xff09;复杂的查询逻辑 三、优化策略及解决方案&#xff08;一&#xff09;创建合适的索引&#xff08;二…

OpenGL笔记七之顶点数据绘制命令和绘制模式

OpenGL笔记七之顶点数据绘制命令和绘制模式 —— 2024-07-07 杭州 下午 总结自bilibili赵新政老师的教程 code review! 文章目录 OpenGL笔记七之顶点数据绘制命令和绘制模式1.OpenGL版本号更改和编译更改2.GL_TRIANGLES模式绘制一个三角形、支持NFC坐标随窗口缩放2.1.三个点…

第二周:李宏毅机器学习笔记

第二周学习周报 摘要Abstract一、深度学习1.Backpropagation&#xff08;反向传播&#xff09;1.1 链式法则1.2 Forward pass&#xff08;前向传播&#xff09;1.3 Backward pass&#xff08;向后传播&#xff09;1.4 总结 2. Regression&#xff08;神奇宝贝案例&#xff09;2…

Redis常用命令——Set、Zset篇

文章目录 一、Set相关命令操作 SADD SMEMBERS SISMEMBER SCARD SPOP SMOVE SREM SINTER 与 SINTERSTORE SUNION 与 SUNIONSTORE SDIFF 与 SDIFFSTORE Set命令小结 二、Zset 相关命令操作 ZADD ZCARD ZCOUNT ZRANGE ZREVRANGE ZPOPMAX BZPOPMAX ZPOPMIN 与 BZPOPMIN ZRANK 与 …

MySQL事务隔离

MySQL事务隔离 前言锁共享锁&#xff08;Shared Lock&#xff09;排他锁&#xff08;Exclusive Lock&#xff09;行级锁&#xff08;Row-Level Lock&#xff09;表级锁&#xff08;Table-Level Lock&#xff09;快照读和当前读查看锁 事务事务的四个特性事务的并发问题事务的隔…

java中的jvm分为几种,各自的优缺点是什么,进来看看,必能凿壁偷光,眼前一亮

前言 Java虚拟机&#xff08;Java Virtual Machine, JVM&#xff09;是运行Java应用程序的核心组件&#xff0c;负责将Java字节码解释或编译为机器代码。不同的JVM实现提供了多种特性和性能优化&#xff0c;满足不同应用场景的需求。以下是一些主要的JVM实现及其各自的优缺点 …

手写深拷贝(Deep Copy)和浅拷贝(Shallow Copy)

在编程中&#xff0c;深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;是两个重要的概念&#xff0c;特别是在处理对象或数组时。它们的主要区别在于如何处理对象或数组中的引用类型&#xff08;如对象、数组等&#xff09;。 浅拷贝&am…

《Windows API每日一练》8.5 listbox控件

列表框是将一批文本字符串显示在一个具有滚动功能的方框中的控件。通过发送消息到列表框的窗口过程&#xff0c;程序可以添加或删除列表中的字符串。当列表框中的一个项目被选中时&#xff0c;列表框控件便发送 WM_COMMAND消息到其父窗口。然后父窗口确定哪个项目被选中。 本节…