uniapp uni-table最简单固定表头

ops/2024/12/13 0:01:35/

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

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.ppmy.cn/ops/141377.html

相关文章

解决同一IP访问网站请求过多限制的方法

一.网站限制IP的原因和影响 1.网站限制IP原因&#xff1a;保护服务器资源&#xff0c;防止恶意攻击 2.防止过度爬取数据&#xff0c;保护其服务器资源免受恶意攻击 二.对用户访问影响&#xff1a;无法正常访问网站&#xff0c;业务受阻 1.解决方法&#xff1a;降低IP访问速率…

数仓技术hive与oracle对比(五)

附录说明 附录是对测试过程中涉及到的一些操作进行记录和解析。 oracle清除缓存 alter system flush shared_pool; 将使library cache和data dictionary cache以前保存的sql执行计划全部清空&#xff0c;但不会清空共享sql区或者共享pl/sql区里面缓存的最近被执行的条目。刷…

【面试】Spirng的IOC启动流程

面试回答总结 IOC启动流程主要分为&#xff1a;容器创建 -> 配置加载 -> Bean的解析 -> Bean的注册->工厂初始化前置工作->执行bean工厂的后置处理器->bean的后置处理器注册->国际化->事件注册->监听器注册->bean的实例化->完成刷新&#xf…

【MySQL】表的基本查询(下)

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

零基础如何使用ChatGPT快速学习Python

引言 AI编程时代来临&#xff0c;没有编程基础可以快速上车享受时代的红利吗&#xff1f;答案是肯定的。本文旨在介绍零基础如何利用ChatGPT快速学习Python编程语言&#xff0c;开启AI编程之路。解决的问题包括&#xff1a;传统学习方式效率低、缺乏互动性以及学习资源质量参差…

Python虚拟环境管理工具:virtualenv

Python虚拟环境管理工具&#xff1a;virtualenv 前言1. 什么是Python虚拟环境&#xff1f;为什么需要虚拟环境&#xff1f; 2. virtualenv概述安装 virtualenv创建虚拟环境激活虚拟环境在Windows上&#xff1a;在Linux/MacOS上&#xff1a; 安装依赖退出虚拟环境 3. virtualenv…

2024年12月大语言模型最新对比:GPT-4、Claude 3、文心一言等详细评测

前言 随着人工智能技术的快速发展&#xff0c;大语言模型(LLM)已经成为了技术领域最热门的话题。本文将详细对比目前主流的大语言模型&#xff0c;帮助大家选择最适合的工具。 一、OpenAI GPT系列 1. GPT-4 核心优势&#xff1a; 多模态理解能力强 逻辑推理能力出色 创造…

golang实现简单的redis服务

golang 手搓redis服务器仓库地址:实现思路: golang 手搓redis服务器 仓库地址: 仓库: https://github.com/dengjiayue/my-redis.git 实现思路: ● 协议: tcp通信 ● 数据包: 长度(4byte)方法(1byte)数据json ● 数据处理: 单线程map读写 ○ 依次处理待处理队列的请求(chan)…