uniapp uni-table最简单固定表头

需求:固定表头数据,在网上找了半天,啥都有,就是一直实现不了,最后更改代码实现

1.效果

2.主要代码讲解+完整代码

表格的父级一定要设置高度,不然会错位,我看网上说设置position:fixed,我觉得没必要,给父级设置position: relative;,表头设置position: absolute就可以定位到想要的位置了,但是这样会导致脱离标准文档流,所以还要在表格内容设置个margin-top:44px.44px是表头的高度,复制如下代码即可实现需求~

<template>
	<view class="uni-container">
		<uni-table ref="table"  border stripe emptyText="暂无更多数据">
			<view class="tableHead">
				<uni-tr>
					<uni-th align="center">
						<view style="width:50px;">姓名</view>
					</uni-th>
					<uni-th align="center">
						<view style="width:50px;">部门</view>
					</uni-th>
					<uni-th align="center">
						<view style="width:50px;">职位</view>
					</uni-th>
					<uni-th align="center">
						<view style="width:50px;">角色</view>
					</uni-th>
				</uni-tr>
			</view>
			<view class="tableBody" >
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>
						<view style="width:50px;">{{item.realname}}</view>
					</uni-td>
					<uni-td>
						<view style="width:50px;">{{item.name}}</view>
					</uni-td>
					<uni-td>
						<view style="width:50px;">{{item.post || ''}}</view>
					</uni-td>
					<uni-td>
						<view style="width:50px;">{{item.roleName}}</view>
					</uni-td>
				</uni-tr>
			</view>
		</uni-table>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				tableData: [{
					name: '382'
				}, {
					name: '382'
				}],
			}
		},
		mounted() {
			const result = [];
			for (let i = 0; i < 100; i++) {
				result.push({
					date: new Date().toISOString(),
					realname: '张三',
					name: '研发',
					post:'11'
				})
			}
			this.tableData = result;
		}
	}
</script>

<style lang="scss">
	.uni-container {
		height: 500rpx;
		
		margin-top: 50rpx;
		position: relative;
	}

	/* //表头固定样式 */
	::v-deep .tableHead {
		font-weight: bold;
		color: #333333;
		background: #F4F6FF;
		z-index: 20;
		position: absolute;
		top: 0rpx;
	}

	::v-deep .tableBody {
		height: 500px;
		overflow: scroll;
		margin-top: 44px;
		background-color: #fff;
	}
</style>

文章到处结束,希望对你有所帮助~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

单元测试SpringBoot

添加测试专用属性 加载测试专用bean Web环境模拟测试 数据层测试回滚 测试用例数据设定

9. Win11上原生运行Ubuntu

本文介绍如何在win11原生系统上运行ubuntu&#xff0c;不需要额外安装虚拟机&#xff0c;以及如何配置网络等。 1.安装正版Win11 由于正版Win11需要钱&#xff0c;网上能破解的win11可能有问题&#xff0c;但是它们的破解工具&#xff0c;却是能正常用的&#xff0c;所以&…

小皮面板(PHPSTUDY)配置多个域名或IP

问题描述 小皮面板默认采用nginx的静态部署&#xff0c;按照使用nginx的习惯只需要额外添加一个server即可&#xff0c;但是会发现直接往配置文件里添加新的server是不生效的&#xff0c;小皮的官网论坛几乎已经停止维护&#xff0c;因此资料较少&#xff0c;原本也没有仔细使…

基于自注意力网络的SASRec

运用了自注意力网络&#xff08;self-attention network&#xff0c;SAN&#xff09;的序列推荐算法&#xff08;SASRec&#xff09;能以并行化的方式捕捉同一序列上不同时间步间的转移关系&#xff0c;最后通过加权求和的方式得出每个时间步的序列特征。 算法原理&#xff1a;…

软件工程知识点

CMMI 阶段式模型 初始的&#xff1a;过程不可预测且缺乏控制。 已管理的&#xff1a;过程为项目服务。 已定义的&#xff1a;过程为组织服务。 定量管理的&#xff1a;过程已度量和控制。 优化的&#xff1a;集中于过程改进。 CMMI连续式模型 CL0&#xff08;未完成的&#…

#渗透测试#红蓝对抗#SRC漏洞挖掘# Yakit(5)进阶模式-MITM中间人代理与劫持(上)

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

Windows11安装Isaac Lab

1.1 下载文件 将 Isaac Lab 仓库克隆到您的工作空间&#xff1a; git clone https://github.com/isaac-sim/IsaacLab.git 1.2 创建Isaac Sim符号链接 F:cd IsaacLab 官方文档里路径/有问题&#xff0c;改成\&#xff09;&#xff1a; # 打开IsaacLab目录cd IsaacLab# 使用…

AI 的时代,新科技和新技术如何推动跨学科的整合?

在当前AI的发展中&#xff0c;我们面临的一个主要挑战就是融合的问题&#xff0c;这实际上不仅是技术上的融合&#xff0c;还有更深层次的哲学层面的思考。 或许在中国这方面的讨论较少&#xff0c;但在西方哲学和神学的语境中&#xff0c;探讨万物的根本和不同学科之间的联系…

力扣打卡12:复原IP地址

链接&#xff1a;93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 这道题需要对字符串进行操作&#xff0c;我选择了三层循环&#xff0c;其实还可以递归。 我在循环时进行了剪枝&#xff0c;比如一些情况直接跳出循环。 我的代码&#xff1a; class Solution { p…

R学习——数据框

目录 1数据框的合并 2数据框的访问 2.1 通过索引[] 2.2符号$访问 2.3 attach访问 2.4 with访问 1数据框的合并 当每个内容存储为单独的向量&#xff0c;data.frame可以进行这些内容单独数据框合并。 2数据框的访问 2.1 通过索引[] [i]输出对应的列 [i,]输出对应的行 …

XMOS将在CES 2025上展出多款由边缘AI驱动的创新音效、音频、识别和处理解决方案

全球智能物联网技术领导者暨匠心独到的半导体科技企业XMOS宣布&#xff1a;该公司将再次参加2025年国际消费电子展&#xff08;CES 2025&#xff09;&#xff0c;并将在本届CES上展出一系列由人工智能&#xff08;AI&#xff09;驱动的全新空间音效、语音捕获与降噪、音视频多模…

第一个C++程序--(蓝桥杯备考版)

第一个C程序 基础程序 #include <iostream>//头⽂件 using namespace std;//使⽤std的名字空间 int main()//main函数 {cout << "hello world!" << endl; //输出&#xff1a;在屏幕打印"hello world!" return 0;}main函数 main 函数是…

密码学——密码学基础、散列函数与数字签名

1.密码学概述 是信息安全的基础和核心&#xff0c;是防范各种安全威胁的重要手段&#xff0c;信息安全的许多相关知识都与密码学相关。 密码学发展 密码学是一门古老而又年轻的学科 &#xff0c;几千年以前就存在&#xff0c;至今仍在发展演进。地位非常重要甚至起决定性作用…

李飞飞的生成式3D场景,对数字孪生的未来影响几何?

大家好&#xff0c;我是日拱一卒的攻城师不浪&#xff0c;致力于技术与艺术的融合。这是2024年输出的第47/100篇文章。 前言 这两天&#xff0c;AI界的教母李飞飞团队重磅发布了空间智能生成式AI大模型。 仅通过一张图片就能够生成一个可操作和交互的3D空间场景。 空间智能的…

H3C NAT实验

实验拓扑 实验需求 按照图示配置 IP 地址私网 A 通过 R1 接入到互联网&#xff0c;私网 B 通过 R3 接入到互联网私网 A 内部存在 Vlan10 和 Vlan20&#xff0c;通过 R1 上单臂路由访问外部网络私网 A 通过 NAPT 使 Vlan10 和 Vlan20 都能够使用 R1 的公网地址访问互联网私网 B…

【Java Web】Tomcat 快速入门

通常&#xff0c;为了让 Java 开发的应用程序&#xff08;app&#xff09;能够在服务器上正常运行&#xff0c;必须安装 Java 运行时环境&#xff08;JRE&#xff09;。JRE 主要支持 Java SE&#xff0c;而如果要运行 Java EE 应用&#xff0c;则需要更多的支持&#xff0c;比如…

域渗透入门靶机之HTB-Cicada

easy难度的windows靶机 信息收集 端口探测 nmap -sT --min-rate 10000 -p- 10.10.11.35 -oA ./port 发现开放了53&#xff0c;88&#xff0c;389等端口&#xff0c;推测为域控 进一步信息收集&#xff0c;对爆破的端口进行更加详细的扫描 小tips&#xff1a;对于众多的端口&…

QT核心功能概览

QT的学习&#xff08;一&#xff09;如何查阅QT文档&#xff1f;&#xff08;以QPushButton为例&#xff09;_qt的组件在qt文档那里面看-CSDN博客 QPushButton Class | Qt Widgets 5.15.18 一、前言 QT虽说功能很庞大&#xff0c;但是常用的控件也不是很多&#xff0c;也就只…

《Java核心技术I》并行数组算法

并行数组算法 Arrays类提供了大量并行化操作。 Arrays.parallelSort方法可以对一个基本类型值或对象的数组排序。 package arrays;import java.io.IOException; import java.nio.charset.StandardCharsets; import java.nio.file.Files; import java.nio.file.Path; import …

深度学习:重塑学校教育的未来

摘要&#xff1a;本文旨在全面剖析深度学习技术在教育领域的应用现状及未来前景。通过对当前深度学习技术在教育中的应用案例进行深入剖析&#xff0c;探讨其在教学效果、学习体验等方面的积极作用&#xff0c;同时分析存在的挑战与问题。在此基础上&#xff0c;本文将进一步展…