uniapp uni-table最简单固定表头

news2024/12/12 19:11:53

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

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>

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

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

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

相关文章

在C#中编程绘制和移动线段

这个示例允许用户绘制和移动线段。它允许您根据鼠标下方的内容执行三种不同的操作。 当鼠标位于某个线段上时&#xff0c;光标会变成手的形状。然后您可以单击并拖动来移动该线段。当鼠标位于线段的终点上时&#xff0c;光标会变成箭头。然后您可以单击并拖动以移动终点。当鼠…

Hyperbolic Representation Learning: Revisiting and Advancing 论文阅读

Hyperbolic Representation Learning: Revisiting and Advancing 论文地址和代码地址1 介绍2 背景知识2.1 黎曼几何与双曲空间(RiemannianGeometry and Hyperbolic Space)2.2 双曲浅层模型2.3 双曲神经网络&#xff08;HNNs&#xff09;2.4 双曲图卷积神经网络&#xff08;HGCN…

Ansible自动化运维(三)playbook剧本详解

Ansible自动化运维这部分我将会分为五个部分来为大家讲解 &#xff08;一&#xff09;介绍、无密钥登录、安装部署、设置主机清单 &#xff08;二&#xff09;Ansible 中的 ad-hoc 模式 模块详解&#xff08;15&#xff09;个 &#xff08;三&#xff09;Playbook 模式详解 …

【机器学习】手写数字识别的最优解:CNN+Softmax、Sigmoid与SVM的对比实战

一、基于CNNSoftmax函数进行分类 1数据集准备 2模型设计 3模型训练 4模型评估 5结果分析 二、 基于CNNsigmoid函数进行分类 1数据集准备 2模型设计 3模型训练 4模型评估 5结果分析 三、 基于CNNSVM进行分类 1数据集准备 2模型设计 3模型训练 4模型评估 5结果分…

196-基于CPCI Express架构的6u 主控板

一、板卡概述 该板卡是基于 CPCI Express架构的3U主控板&#xff0c;CPU采用Intel Pentium M 2.0GHz CPU&#xff0c;2M L2 cache&#xff0c;533M前端总线&#xff0c;支持512MB / 1GB表贴DDRII 400/533 MHz内存。 二、功能和技术指标 Intel Pentium M 2.0GHz CPU&#xff0c…

机器学习01-发展历史

机器学习01-发展历史 文章目录 机器学习01-发展历史1-传统机器学习的发展进展1. 初始阶段&#xff1a;统计学习和模式识别2. 集成方法和核方法的兴起3. 特征工程和模型优化4. 大规模数据和分布式计算5. 自动化机器学习和特征选择总结 2-隐马尔科夫链为什么不能解决较长上下文问…

HTA8998 实时音频跟踪的高效内置升压2x10W免电感立体声ABID类音频功放

1、特征 输出功率(fIN1kHz,RL4Ω&#xff0c;BTL) VBAT 4V, 2x10.6W(VOUT9V,THDN10%) VBAT 4V, 2x8.6W (VOUT9V,THDN1%) 内置升压电路模式可选择:自适应实时音频跟踪 升压(可提升播放时间50%以上)、强制升压 最大升压值可选择&#xff0c;升压限流值可设置 ACF防破音功能 D类…

Modern Effective C++ 条款三十八:关注不同线程句柄的析构行为

之前内容的总结&#xff1a; item37中说明了可结合的std::thread对应于执行的系统线程。未延迟&#xff08;non-deferred&#xff09;任务的future&#xff08;参见item36&#xff09;与系统线程有相似的关系。 因此&#xff0c;可以将std::thread对象和future对象都视作系统…

【Spring】IoC和DI,控制反转,Bean对象的获取方式

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;什么是IoC 1&#xff1a;什么是容器 2&#xff1a;什么是IoC 二&#xff1a;IoC应用…

【网络协议栈】TCP/IP协议栈中重要协议和技术(DNS、ICMP、NAT、代理服务器、以及内网穿透)

每日激励&#xff1a;“请给自己一个鼓励说&#xff1a;Jack我很棒&#xff01;—Jack” 绪论​&#xff1a; 本章是TCP/IP网络协议层的完结篇&#xff0c;本章将主要去补充一些重要的协议和了解一些网络中常见的名词&#xff0c;具体如&#xff1a;DNS、ICMP、NAT、代理服务器…

离屏渲染概述

我们知道&#xff0c;图像的处理基本都是在GPU中进行&#xff0c;然后GPU将渲染的结果放入当前渲染屏幕的帧缓冲区中&#xff0c;视频控制器取出里面的内容&#xff0c;在屏幕上进行显示。那么有没有什么情况&#xff0c;会因为某些限制&#xff0c;GPU无法将全部的渲染结果直接…

探索 Python 应用的分层依赖:解决 Linux 环境中的 libvirt-python 安装问题

探索 Python 应用的分层依赖&#xff1a;解决 Linux 环境中的 libvirt-python 安装问题 背景Python 版本升级 问题描述原因分析与解决方案 Python 应用的分层依赖&#xff1a;安装与部署的视角libvirt-python的分层依赖尝试的解决方案 使用编译好的 .whl 文件"嫁接"整…

vmware vsphere5---部署vCSA(VMware vCenter Server)附带第二阶段安装报错解决方案

声明 因为这份文档我是边做边写的&#xff0c;遇到问题重新装了好几次所以IP会很乱 ESXI主机为192.168.20.10 VCSA为192.168.20.7&#xff0c;后台为192.168.20.7:5480 后期请自行对应&#xff0c;后面的192.168.20.57请对应192.168.20.7&#xff0c;或根据自己的来 第一阶段…

Unity3D下采集camera场景并推送RTMP服务实现毫秒级延迟直播

技术背景 好多开发者&#xff0c;希望我们能够分享下如何实现Unity下的camera场景采集并推送rtmp服务&#xff0c;然后低延迟播放出来。简单来说&#xff0c;在Unity 中实现采集 Camera 场景并推送RTMP的话&#xff0c;先是获取 Camera 场景数据&#xff0c;通过创建 RenderTex…

指令周期流程图

例题一 例题二 例题三

使用C#通过ColorMatrix对象为图像重新着色

此示例产生了一些令人印象深刻的结果&#xff0c;但实际上非常简单。 它使用其他几个示例演示的 ImageAttribute 技术来快速操作图像的颜色。 下面的AdjustColor方法启动图像着色的过程。 // Adjust the images colors. private Image AdjustColor(Image image) {// Make the …

SQL 在线格式化 - 加菲工具

SQL 在线格式化 打开网站 加菲工具 选择“SQL 在线格式化” 或者直接访问 https://www.orcc.online/tools/sql 输入sql&#xff0c;点击上方的格式化按钮即可 输入框得到格式化后的sql结果

AI作图效率高,亲测ToDesk、顺网云、青椒云多款云电脑AIGC实践创作

一、引言 随着人工智能生成内容&#xff08;AIGC&#xff09;的兴起&#xff0c;越来越多的创作者开始探索高效的文字处理和AI绘图方式&#xff0c;而云电脑也正成为AIGC创作中的重要工具。相比于传统的本地硬件&#xff0c;云电脑在AIGC场景中展现出了显著的优势&#xff0c;…

【密码学】SM4算法

一、 SM4算法简介 SM4算法是中国国家密码管理局于2012发布的一种分组密码算法&#xff0c;其官方名称为SMS4&#xff08;SMS4.0&#xff09;&#xff0c;相关标准为GM/T 0002-2012《SM4分组密码算法》。SM4算法的分组长度和密钥长度均为128比特,采用非平衡Feistel结构。采用32…

Proteus(8.15)仿真下载安装过程(附详细安装过程图)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、Proteus是什么&#xff1f; 二、下载链接 三、下安装步骤 1.解压&#xff0c;有键管理员运行 2.点击Next&#xff0c;进行下一步 3.勾选I accept…&#…