当前位置: 首页 > news >正文

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.渲染完成

相关文章:

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

1.接口表格数据&#xff1a; {"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name&quo…...

beyond Compare连接 openWrt 和 VsCode

连接步骤总结 1. 新建会话 -> 文件夹比较 2.点击浏览文件夹 3.在弹出页面 配置 ftp 3.1&#xff09;选中ftp 配置文件 3.2)选中ssh2 3.3)填写我们需要远端连接的主机信息 先点击连接并浏览 得到下方文件夹 弹出无效登录&#xff0c;说明需要密码 我们返回右键刚刚创建的新 …...

量化机器人能否识别市场机会?

量化机器人的设计和应用是为了通过高级算法和大数据分析&#xff0c;精确地识别和把握市场中的交易机会。这些机器人的能力不仅仅局限于执行预定的交易策略&#xff0c;更包括在复杂和快速变化的市场环境中识别利润机会。 首先&#xff0c;量化机器人能够处理和分析大量的市场…...

香橙派AIpro开发板评测:部署yolov5模型实现图像和视频中物体的识别

OrangePi AIpro 作为业界首款基于昇腾深度研发的AI开发板&#xff0c;自发布以来就引起了我的极大关注。其配备的8/20TOPS澎湃算力&#xff0c;堪称目前开发板市场中的顶尖性能&#xff0c;实在令人垂涎三尺。如此强大的板子&#xff0c;当然要亲自体验一番。今天非常荣幸地拿到…...

MongoDB教程(二):mongoDB引用shell

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…...

A133 Android10 root修改

1.前言 客户应用需求root相关的权限&#xff0c;我们需要修改系统的权限才可以满足客户需求 2.修改方法 frameworks层&#xff1a;注释掉 diff --git a/frameworks/base/core/jni/com_android_internal_os_Zygote.cpp b/frameworks/base/core/jni/com_android_internal_os_…...

实验场:在几分钟内使用 Bedrock Anthropic Models 和 Elasticsearch 进行 RAG 实验

作者&#xff1a;来自 Elastic Joe McElroy, Aditya Tripathi 我们最近发布了 Elasticsearch Playground&#xff0c;这是一个新的低代码界面&#xff0c;开发人员可以通过 A/B 测试 LLM、调整提示&#xff08;prompt&#xff09;和分块数据来迭代和构建生产 RAG 应用程序。今天…...

代理详解之静态代理、动态代理、SpringAOP实现

1、代理介绍 代理是指一个对象A通过持有另一个对象B&#xff0c;可以具有B同样的行为的模式。为了对外开放协议&#xff0c;B往往实现了一个接口&#xff0c;A也会去实现接口。但是B是“真正”实现类&#xff0c;A则比较“虚”&#xff0c;他借用了B的方法去实现接口的方法。A…...

Laravel - laravel-websockets 开发详解

1.我laravel-websockets 的开发环境 Laravel 9.0Laravel WebSockets &#xff08;最新版&#xff09;Laravel Vite 2. 安装服务器端包 beyondcode/laravel-websockets 运行以下命令安装laravel-websockets composer require beyondcode/laravel-websockets 安装完后&#…...

vue3 学习笔记04 -- axios的使用及封装

vue3 学习笔记04 – axios的使用及封装 安装 Axios 和 TypeScript 类型定义 npm install axios npm install -D types/axios创建一个 Axios 实例并封装成一个可复用的模块&#xff0c;这样可以在整个应用中轻松地进行 API 请求管理。 在 src 目录下创建一个 services 文件夹&…...

键盘快捷键设置录入

效果图&#xff1a; 代码&#xff1a; import React, {useContext, useEffect, useRef} from react import {message} from "antd"; import lodash from "lodash"; import {StateContext} from ../../index.tsx import {useUpdateEffect} from "ahoo…...

刷题Day49|647. 回文子串、516.最长回文子序列

647. 回文子串 647. 回文子串 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;递推公式的含义是[i, j]内的子串是否为回文子串&#xff08;bolean[][])。一共两种情况&#xff1a;s[i] s[j]&#xff0c;i和j相差1以外就得判断中间包含的的字符串是否为回文了&…...

关于transformers库验证时不进入compute_metrics方法的一些坑

生成式任务输入就是标签 transformers在进入compute_metrics前会有一个判断&#xff0c;源码如下&#xff1a; # 版本 transformers4.41.2 # 在trainer.py 的 3842 行 # Metrics! if (self.compute_metrics is not Noneand all_preds is not Noneand all_labels is not Nonea…...

苹果提出RLAIF:轻量级语言模型编写代码

获取本文论文原文PDF&#xff0c;请在公众号【AI论文解读】留言&#xff1a;论文解读 代码生成一直是一个充满挑战的领域。随着大型语言模型&#xff08;LLM&#xff09;的出现&#xff0c;我们见证了在自然语言理解和生成方面的显著进步。然而&#xff0c;当涉及到代码生成&a…...

[leetcode] shortest-subarray-with-sum-at-least-k 和至少为 K 的最短子数组

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int shortestSubarray(vector<int>& nums, int k) {int n nums.size();vector<long> preSumArr(n 1);for (int i 0; i < n; i) {preSumArr[i 1] preSumArr[i] nums[i];}int res n…...

专业140+总分420+天津大学815信号与系统考研经验天大电子信息与通信工程,真题,大纲,参考书。

顺利上岸天津大学&#xff0c;专业课815信号与系统140&#xff0c;总分420&#xff0c;总结一些自己的复习经历&#xff0c;希望对于报考天大的同学有些许帮助&#xff0c;少走弯路&#xff0c;顺利上岸。专业课&#xff1a; 815信号与系统&#xff1a;指定教材吴大正&#xf…...

前端如何取消接口调用

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 1. xmlHttpRequest是如何取消请求的&#xff1f; 实例化的XMLHttpRequest对象上也有abort方法 const xhr new XMLHttpRequest(); xhr.addEventListener(load, function(e)…...

k8s 容器环境下的镜像如何转换为docker 使用

在无法连接registry 的环境中&#xff0c;想要把 crictl 中的镜像给docker 使用&#xff0c;应该怎么处理&#xff1f; 其实容器镜像是通用的&#xff0c;crictl 和ctr 以及docker 镜像是可以互相使用的&#xff0c;因为docker 在1.10版本之后遵从了OCI。所以crictl 环境下的镜…...

FreeRTOS 队列

队列是一种任务到任务、任务到中断、中断到任务数据交流的一种机制。在队列中可以存 储数量有限、大小固定的多个数据&#xff0c;队列中的每一个数据叫做队列项目&#xff0c;队列能够存储队列项 目的最大数量称为队列的长度&#xff0c;在创建队列的时候&#xff0c;就需要指…...

如何识别图片文字转化为文本?5个软件帮助你快速提取图片文字

如何识别图片文字转化为文本&#xff1f;5个软件帮助你快速提取图片文字 将图片中的文字提取为文本是一项非常有用的技能&#xff0c;特别是当你需要处理大量扫描文档、截图或其他图片时。以下是五款能够帮助你快速提取图片文字的软件&#xff1a; 迅捷文字识别 这是一款非…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...