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

uniapp简单table表

news 来源：原创 2025/8/23 10:13:12

<template><view class="container"><scroll-view scroll-x="true" scroll-y="true" class="table-scroll"><view class="table-header"><view class="table-cell fixed-column">序号</view><view class="table-cell fixed-column">姓名</view><view class="table-cell" v-for="(header, index) in headers" :key="index">{{ header }}</view></view><view class="table-body"><view class="table-row" v-for="(row, rowIndex) in data" :key="rowIndex"><view class="table-cell fixed-column">{{ row.id }}</view><view class="table-cell fixed-column">{{ row.name }}</view><view class="table-cell" v-for="(cell, cellIndex) in row.cells" :key="cellIndex">{{ cell }}</view></view></view></scroll-view></view>
</template><script>
export default {data() {return {headers: ['列1', '列2', '列3', '列4', '列5'],data: [{ id: 1, name: '张三张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 2, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 3, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 4, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 5, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 6, name: '张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 7, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 8, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 9, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 10, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 11, name: '张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 12, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 13, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 14, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 15, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 16, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 17, name: '张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 18, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 19, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 20, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 21, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 22, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 23, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 24, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },{ id: 25, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] }]};}
};
</script><style scoped>
.container {height: 100vh;overflow: hidden;padding-bottom: 0;padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}.table-scroll {height: 100%;
}
.table-header {position: sticky;top: 0;z-index: 10;
}.table-header,
.table-row {display: flex;
}.table-cell {flex: 1;min-width: 180rpx;padding: 10rpx;border: 1rpx solid #ddd;text-align: center;box-sizing: border-box;background-color: #fff;
}.fixed-column {position: sticky;left: 0;background-color: #f0f0f0;z-index: 1;
}.table-header .fixed-column:nth-child(1) {z-index: 2; /* 确保第一列在最上层 */left: 0rpx; /* 实际上这个left属性对于第一列来说是多余的，因为它默认就是0 */
}.table-body .fixed-column:nth-child(1) {z-index: 2; /* 确保第一列在最上层 */left: 0; /* 第一列固定在左侧 */
}/* 由于上面的CSS变量和计算方式在Vue中不直接支持，我们可以采用以下替代方案： */
.table-body .fixed-column:nth-child(1) {/* 假设每列的宽度是100px，且没有列间距 */left: 0rpx; /* 根据实际列宽调整 */
}/* 为了简化示例，这里我们假设每列宽度相同且没有列间距，实际项目中可能需要根据设计调整 */
</style>

uniapp简单table表

<template><view class"container"><scroll-view scroll-x"true" scroll-y"true" class"table-scroll"><view class"table-header"><view class"table-cell fixed-column">序号<…...

编程日记 2025/8/23 10:13:12

prompt大师高效提示词解析

Prompt大师李继刚高效提示词示例解析一、「汉语新解」提示词核心结构采用Lisp语言框架嵌套中文语义，通过(defun 新汉语老师 ()...)定义角色风格（融合奥斯卡王尔德、鲁迅的批判性语言），用(隐喻 (一针见血...))构建解释逻辑链。…...

编程日记 2025/8/23 10:11:42

uni-app如何发布项目为app_2025

参考大佬的：uni-app项目打包成apk（本地打包篇）_uniapp打包apk-CSDN博客 1、导入前配置在 HBuilder X 中打开uni-app项目中的 mainifest.json 文件，appid没有的话可以点“重新获取” 2、打包然后关注控制台，导出成功…...

编程日记 2025/8/21 9:53:44

MySQL与Canal、RabbitMQ集成指南

MySQL 部分 1. 查看是否开启 binlog MySQL 8 默认开启 binlog。可以通过以下命令查看是否开启： SHOW VARIABLES LIKE log_bin;如果返回结果为 ON，则表示 binlog 已开启。 Variable_nameValuelog_binON 2. 若未开启 binlog，则需手动配置 …...

编程日记 2025/8/23 10:11:40

新品发布|启英泰伦联合启明云端推出离在线语音大模型方案

当前，生成式大模型正以颠覆性姿态重塑人机交互的边界，并逐渐向终端场景渗透。然而，云端大模型在落地终端场景时面临两大挑战： 在真实噪声场景下容易听不清、误识别，影响交互准确性；云端处理冗余数据及大规…...

编程日记 2025/8/23 10:11:05

网编高级 day01

网编高级 day01 0. 大纲1. Modbus协议1.1. Modbus起源1.2. 分类1.3. Modbus TCP特点 2. Modbus TCP协议格式2.1. 报文头2.2. 寄存器2.3. 功能码 0. 大纲协议： modbus协议：modbus TCP、modbus RTUhtml 网页：http协议Webserver 工具&#x…...

编程日记 2025/8/23 10:12:45

2001-2023年上市公司数字化转型年报词频统计（年报词频统计和MDA词频统计两种方式）（吴非、赵宸宇、甄红线300+关键词三种方法）

2001-2023年上市公司数字化转型年报词频统计（年报词频统计和MD&A词频统计两种方式）（吴非、赵宸宇、甄红线300关键词三种方法） 1、时间：2001-2023年 2、来源：上市公司年报 3、参考文献： …...

编程日记 2025/8/19 6:49:46

数据分析与AI丨AI Fabric：数据和人工智能架构的未来

AI Fabric 架构是模块化、可扩展且面向未来的，是现代商业环境中企业实现卓越的关键。在当今商业环境中，数据分析和人工智能领域发展可谓日新月异。几乎每天都有新兴技术诞生，新的应用场景不断涌现，前沿探索持续拓展。可遗憾的是&…...

编程日记 2025/8/23 10:11:41

MQ消息发送不在MySQL事务中，该如何保证一致性？

在 MQ 消息发送与 MySQL 事务分离的场景下，可通过以下方案保障数据一致性： 一、核心原则确保业务操作成功与消息发送成功的最终一致性，避免因网络抖动、服务宕机等异常导致以下问题： 场景1：业务操作成功但消息未…...

编程日记 2025/8/21 5:37:04

[rust] rust学习

rust学习 1. 项目组织结构工程 # 创建一个工程 cargo new my-project工作空间在 Rust 中，工作空间（Workspace） 是一个包含多个 Rust 项目的共享环境，用于管理多个 crate（库或可执行文件）。它允许多个…...

编程日记 2025/8/23 10:11:41

艾尔登复刻Ep1——客户端制作、场景切换、网络控制

需要添加的插件内容 Netcode for GameObjects：是一个为 Unity 游戏开发提供高级网络功能的 SDK。它的主要作用是允许开发者在其 GameObject 和 MonoBehaviour 工作流中集成网络功能，并且可以与多种底层传输层协议兼容。具体内容请看：https:…...

编程日记 2025/8/22 5:40:56

正则表达式(复习)

文章目录一、[]: 一个字符集合二、{}: 重复次数三、特殊符号四、(): 分组五、python代码示例六、注意正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个…...

编程日记 2025/8/23 10:08:53

密码学笔记

密码学一、密码学基础概念 1. CIA三要素机密性 (Confidentiality)：信息不被未授权者访问。例子：用钥匙锁住日记本，只有你有钥匙。完整性 (Integrity)：信息在传输/存储中不被篡改。例子：快递包裹封条&#xff0c…...

编程日记 2025/8/22 12:30:35

C#结构体(Struct)详解

在 C# 中，‌结构体（struct）‌ 是一种值类型数据类型，适用于封装小型数据组。与类（class）不同，结构体在栈（Stack）上分配内存，且赋值时会发生值复制。以下是结构…...

编程日记 2025/8/20 11:00:53

Tomato靶机通关攻略

1.安装并开启靶机 2.用Kali查询靶机IP Kali 的IP 靶机的IP 3.访问靶机 4.用御剑扫描端口 5.获取敏感目录分别访问三个目录 6.查看目录发现info.php并进入查看源码，发现文件包含漏洞利用漏洞查看日志文件 http://192.168.40.139/antibot_image/antibots/info…...

编程日记 2025/8/23 10:09:46

Go Ebiten小游戏开发：俄罗斯方块

在这篇文章中，我们将一起开发一个简单的俄罗斯方块游戏，使用Go语言和Ebiten游戏库。Ebiten是一个轻量级的游戏库，适合快速开发2D游戏。我们将逐步构建游戏的基本功能，包括游戏逻辑、图形绘制和用户输入处理。项目结构我们的项…...

编程日记 2025/8/18 9:42:41

Github 2025-03-12 C开源项目日报Top5

根据Github Trendings的统计，今日(2025-03-12统计)共有5个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量C项目5C++项目1Lean的LEDE源码：为国产龙芯LOONGSON SoC loongarch64/飞腾Phytium腾锐2000系列架构添加支持创建周期：2338 天开发语言：C协议类…...

编程日记 2025/8/23 10:12:45

【机器学习-基础知识】统计和贝叶斯推断

1. 概率论基本概念回顾 1. 概率分布定义：概率分布（Probability Distribution）指的是随机变量所有可能取值及其对应概率的集合。它描述了一个随机变量可能取的所有值以及每个值被取到的概率。对于离散型随机变量，使用概率质量函数来描述。对于连续型随机变量，使用概率…...

编程日记 2025/8/23 8:18:49

Unity3D 着色器优化（Shader Optimization）

前言 Unity3D 着色器（Shader）优化是提升渲染性能的关键环节，尤其是在移动设备或复杂场景中。以下是系统的优化策略和实践建议： 对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经…...

编程日记 2025/8/23 10:11:06

基于SpringBoot的“体育购物商城”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“体育购物商城”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统总体模块设计前台用户登录界面系统首页界面…...

编程日记 2025/8/23 10:09:45

数据库约束

数据库约束 1. NULL约束2. UNIQUE：唯一约束3. DEFAULT：默认值约束4. PRIMARY KEY：主键约束5. FOREIGN KEY：外键约束6. CHECK约束数据库约束是关系型数据库的一个重要功能，主要作用是保证数据的正确性，也就…...

编程日记 2025/8/23 10:11:41

【经典算法】Leetcode-零钱兑换问题

一、题目给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1 。你可以认为每种硬币的数量是无限的…...

编程日记 2025/8/23 10:11:42

Go 语言使用Protobuf 进行序列化详解

文章目录 Go 语言使用Protobuf 进行序列化详解1. Protobuf是什么?2. 安装Protobuf 及 Go 依赖3. 编写.proto 文件4. 实现序列化和反序列化 Go 语言使用Protobuf 进行序列化详解 1. Protobuf是什么? 以下是 Protobuf 官方中文文档的概述: Protobuf(Protocol Buffers) 是一种…...

编程日记 2025/8/19 7:45:21

Windows控制台函数：标准输入输出流交互函数GetStdHandle（）

目录什么是 GetStdHandle？ 它长什么样？ 怎么用它？ 它跟 std::cout 有什么不一样？ GetStdHandle 是一个 Windows API 函数，用于获取标准输入、标准输出或标准错误设备的句柄。它定义在 Windows 的核心头文件 <…...

编程日记 2025/8/20 11:00:52

自然语言处理初学者指南

文章目录一、说明二、自然语言处理发展史2.1 最早的自然语言处理简介2.2 历史2.3 NLP 的早期工作三、NLP的现代方法3.1 单词编码3.2 循环神经网络3.3 强化学习3.4 深度学习四、更进一步的方法一、说明对于初学者来说，自然语言处理的发展历史非常有必要了解&am…...

编程日记 2025/8/19 7:12:58

Kubernetes教程（七）了解集群、标签、Pod和Deployment

了解集群、标签、Pod和Deployment 一、K8s资源对象二、K8s集群1. Master2. Node 三、Namespace（命名空间）四、Label（标签）五、Pod1. 共享网络命名空间2. 共享数据六、工作负载1. 设置副本数2. 应用升级结语 Kubernetes的知识真的…...

编程日记 2025/8/23 10:07:37

【BUG分析】微服务无法读取Nacos中的共享配置

项目场景基于Spring Cloud微服务的商城系统。使用Nacos进行统一配置管理，在bootstrap.xml中读取配置参数。问题描述购物车微服务可以读取Nacos中的共享mybatis配置，商品管理微服务却读不到，启动报错提示无法配置数据库源： …...

编程日记 2025/8/23 10:08:52

SpringMVC （一）基础

目录 SpringMVC 一简单使用 1 新建模块选择指定参数 2 创建实现类 3 将项目启动 4 运行结果：在浏览器当中响应执行二 RequestMapping 三请求限定 SpringMVC SpringMVC是Spring的web模块，用来开发Web应用，SpringMVC应用最终作为B/…...

编程日记 2025/8/23 10:12:46

基础定义和使用 class Animal {constructor(name, species, age) {this.name namethis.species speciesthis.age age} }let dog new Animal("Spot", "Dog", 4)私有变量变量名前带#即可。 Getter 和Setter方法继承 // 父类 class Point{construc…...

编程日记 2025/8/22 22:29:37

兴达易控Profinet 转 ModbusTCP跨网段通信模块

Profinet 转 ModbusTCP/跨网段通信模块 Profinet转ModbusTCP/跨网段通信模块，作为现代工业自动化系统中不可或缺的重要组件，正日益受到广泛关注和应用。这种模块的核心功能是将Profinet网络协议转换为Modbus TCP协议，实现不同网络之间的无缝…...

编程日记 2025/8/22 7:40:42

linux 的免密切换用户PAM配置

/etc/pam.d/su是Linux系统中与用户切换（su命令）相关的PAM（Pluggable Authentication Modules，可插拔认证模块）配置文件。以下是对它的详细介绍： 简介作用 PAM是一种用于管理系统认证的机制，…...

编程日记 2025/8/19 15:08:06

使用 Python pandas操作 Excel 文件

使用 Python pandas 操作 Excel 文件 flyfish pandas 是 Python 中一个强大的数据处理和分析库，它提供了丰富的数据结构（如 Series 和 DataFrame）和数据操作方法，能够方便地处理各种数据格式，包括 Excel 文件。安装…...

编程日记 2025/8/20 14:00:09

UE5.5 Niagara 发射器粒子更新模块

Particle State （粒子状态）模块 Particle State 主要用于控制粒子的生存状态，包括死亡、消失、响应事件等。 Particle State Kill Particles When Lifetime Has Elapsed 当粒子的生命周期结束时，销毁这些粒子。 Lifetime &…...

编程日记 2025/8/20 14:03:21

状态模式的C++实现示例

核心思想状态模式（State Pattern） 是一种行为设计模式，允许对象在其内部状态改变时改变其行为。它将状态相关的逻辑分散到不同的状态类中，避免了使用大量的条件语句来处理不同状态下的行为。状态抽象化：将对象的状…...

编程日记 2025/8/22 4:36:13

ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统

客户花了100元买了一个系统，开始不能导入，到处找人帮忙解决。给解决能导入了，不能修改，满足不了用户的需求。用户一狠心，花200块钱，叫我给他定制了一个电子证书查询系统。还免费给部署到服务器。惭愧惭愧……...

编程日记 2025/8/20 14:04:28

STM32全系大阅兵（2）

接前一篇文章：STM32全系大阅兵（1）本文内容参考： STM32家族系列的区别_stm32各个系列区别-CSDN博客 STM32--STM32 微控制器详解-CSDN博客...

编程日记 2025/8/20 14:03:54

upload-labs通关攻略【Pass-01~Pass-19】

注意：GitHub中upload-labs有多个版本:19关、21关、23关。版本不同，关卡的顺序也很可能不同。此次例子是21关。项目地址：https://github.com/c0ny1/upload-labs 一、Pass-01 【js前端检测的绕过】 1. 打开Pass-01 访问：ip/uploa…...

编程日记 2025/8/22 1:31:42

HCIP复习拓扑练习(修改版)

拓扑： 实际： 需求： 需求分析 1.这意味着学校内部网络能够正常解析域名并进行互联网访问。 2. PC1和PC2处于同一个内网192.168.1.0/24，其中PC1有权限访问外部网段3.3.3.0/24，而PC2没有。这涉及ACL（访问控制…...

编程日记 2025/8/20 14:00:08

Zabbix 7.2 + Grafana 中文全自动安装ISO镜像

简介基于Zabbix 官方的Alma Linux 8 作为基础镜像。镜像源都改为国内大学镜像站，自动联网安装ZabbixGrafana。安装中文字体、Zabbix和Grafana也配置默认中文。 Zabbix 也指定中文字体，绘图无乱码。配置时区为东八区，Zabbix配置We…...

编程日记 2025/8/20 14:07:45

使用 Python 将 PDF 转换为文本：打造一个简单高效的提取工具

在数字化时代，PDF 文件是我们日常生活中常见的文档格式。无论是学术论文、工作报告还是电子书，PDF 的广泛使用让提取其中文字内容成为一个常见需求。手动复制粘贴显然效率低下，而借助 Python，我们可以轻松实现自动化提取。本文将介…...

编程日记 2025/8/20 14:04:27

scoop退回软件版本的方法

title: scoop退回软件版本的方法 date: 2025-3-11 23:53:00 tags: 其他前言在软件更新后，如果出现了很影响使用体验的问题，那么可以把软件先退回以前的版本进行使用， 但是scoop本身并没有提供直接让软件回退版本的功能，因此…...

编程日记 2025/8/21 19:05:56

网络爬虫-2:正则化

1.正则化一.正则化 1.转义字符转义字符含义\s空白字符（空格、制表符等）\d数字字符（0-9）\w字母、数字或下划线.除换行符外的任意字符\n换行符\t制表符 import re result re.findall(r\s, Hello World\nPython) print(result)…...

编程日记 2025/8/22 12:07:19

emacs使用mongosh的方便工具发布

github项目地址: GitHub - csfreebird/emacs_mongosh: 在emacs中使用mongosh快速登录mongodb数据库 * 用途在emacs中使用mongosh快速登录mongodb数据库， 操作方法: M-x mongosh, 输入数据库名称，然后就可以自动登录，前提是你已经配置好了…...

编程日记 2025/8/20 7:41:04

【Spring】详细剖析Spring程序

文章目录一、Spring概述1. Spring简介1.1 OCP开闭原则1.2 依赖倒置原则DIP1.3 控制反转IoC 2. Spring8大模块二、Spring的入门程序1. Spring官网2. 第一个Spring程序2.1 创建工程2.2 配置 pom.xml：2.3 定义bean：User . java2.4 配置文件 spring.xml2.5…...

编程日记 2025/8/20 14:00:58

《MySQL数据库从零搭建到高效管理｜库的基本操作》

目录一、数据库的操作 1.1 展示数据库 1.2 创建数据库 1.3 使用数据库 1.4 查看当前数据库 1.5 删除数据库 1.6 小结二、常用数据类型 2.1 数值类型 2.2 字符串类型 2.3 日期类型一、数据库的操作打开MySQL命令行客户端，安装完MySQL后会有两个客户端…...

编程日记 2025/8/20 13:59:13

docker部署jenkins，安装使用一条龙教程

Jenkins k8s 实现CI/CD 一、简介 1. JenKins是什么? Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成。 2. 什么是CI / CD…...

编程日记 2025/8/23 4:07:27

图像识别技术与应用-YOLO

1 YOLO-V1 YOLO-V1它是经典的one-stage方法，You Only Look Once，名字就已经说明了一切！把检测问题转化成回归问题，一个CNN就搞定了！也可以对视频进行实时检测，应用领域非常广！ YOLO-V1诞生与2…...

编程日记 2025/8/20 14:00:06

【网络通信安全】子专栏链接及简介

目录操作系统安全：筑牢网络安全根基网络协议安全：守护数据传输通道 Web 站点安全开发：打造安全的网络交互平台在数字化浪潮席卷的当下，网络通信已深度融入生活与工作的方方面面，从日常的线上购物、社交互动…...

编程日记 2025/8/19 20:52:42

Oracle比较好的几本书籍

1.《Oracle专家高级编程》 2.《Oracle高效设计》 3.《Oracle9i&10g&11g编程艺术深入数据库体系结构》 4.《让Oracle跑的更快》(1/2) ....... n.《Oracle官方文档的阅读》下面包括这几个部分，可以跟进研读一下： （1）《…...

编程日记 2025/8/20 14:02:18

忘记dedecms后台超级管理员账号和密码的解决方案

解决方案： 方案一、数据库修改： 1、前提是您能登录到数据库后台，登录MySQL数据库管理工具（如phpMyAdmin） 2、打开数据库中的 dede_admin 表，找到管理员记录，将 pwd 字段的值改成 f297a57a5a7…...

编程日记 2025/8/20 14:06:36

相关文章：