uniapp实现表格冻结

news2024/12/27 2:49:45

 效果图如下:

思路:

1.由于APP项目需要,起初想去插件市场直接找现成的,结果找了很久没找到合适的(有的不支持vue2有的不能都支持APP和小程序)

2.后来,就只能去改uni-table源码了,因为u-table不支持固定列。

直接上代码

注意:需要动态计算表头高度

<template>
	<view class="content">
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<view class="table-header">
				<uni-tr>
					<uni-th width="120" align="center" class="sticky-column">名称</uni-th>
					<uni-th width="100" align="center">标签名</uni-th>
					<uni-th width="100" align="center">CNB-槽号-通道</uni-th>
					<uni-th width="100" align="center">量程</uni-th>
					<uni-th width="100" align="center">预警值</uni-th>
					<uni-th width="100" align="center">联锁值</uni-th>
					<uni-th width="100" align="center">程序停机点名</uni-th>
					<uni-th width="180" align="center">操作</uni-th>
				</uni-tr>
			</view>
			<view class="warper" :style="{ maxHeight: 'calc(100vh - ' + boxHeight + 'rpx)' }">
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td width="120">{{item.name }}</uni-td>
					<uni-td width="100">
						<view><u-tag :text="item.tagname" size="mini" type="primary"></u-tag></view>
					</uni-td>
					<uni-td width="100">
						<view class="name">{{ item.passage }}</view>
					</uni-td>
					<uni-td width="100">
						<view>{{ item.range }}</view>
					</uni-td>
					<uni-td width="100">{{ item.prewarningValue }}</uni-td>
					<uni-td width="100">{{ item.interlockingValue }}</uni-td>
					<uni-td width="100"><u-tag :text="item.programStop" size="mini" type="warning"></u-tag></uni-td>
					<uni-td>
						<view class="uni-group">
							<u-button class="uni-button" size="mini" type="primary"
								@click="selectdetail(index,item)">查看</u-button>
						</view>
					</uni-td>
				</uni-tr>
			</view>
		</uni-table>
	</view>
</template>

<script>
	import tableList from '@/subRemoteOperate/untilMethods/table/tableList.js';
	export default {
		data() {
			return {
				loading: false,
				boxHeight: 0, // box盒子的高度
				tableData: tableList.data
			}
		},
		mounted() {
			this.getBoxHeight();
		},
		methods: {
			//获取盒子高度
			getBoxHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.uni-table-tr')
					.boundingClientRect(rect => {
						if (rect) {
							this.boxHeight = rect.height;
						}
					})
					.exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.table-header {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 99999;
		background-color: #fff;
	}

	//冻结表头第一列
	/deep/ .uni-table-tr .uni-table-td:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 9999;
	}

	/deep/ .uni-table-tr {
		overflow: visible;
		background-color: #fff;
	}

	/deep/ .uni-table-tr .uni-table-th:first-child {
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 9999;
	}
</style>

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

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

相关文章

Vue3中watch用法

在 Vue3 中的组合式 API 中&#xff0c;watch 的作用和 Vue2 中的 watch 作用是一样的&#xff0c;他们都是用来监听响应式状态发生变化的&#xff0c;当响应式状态发生变化时&#xff0c;都会触发一个回调函数。 当需要在数据变化时执行异步或开销较大的操作时&#xff0c;com…

推三返一模式:电商运营的新趋势

商行业在近年来发展迅速&#xff0c;各种平台和产品层出不穷&#xff0c;竞争也越来越激烈。如何在这样的环境中脱颖而出&#xff0c;吸引和留住用户&#xff0c;提高销售和利润&#xff0c;是每一个电商企业家都面临的挑战。有没有一种运营模式&#xff0c;可以让用户主动购买…

解决报错:npm ERR! code 1

我是 npm install --legacy-peer-deps 成功了 解决方案&#xff1a; 升级swiper库&#xff1a;你可以尝试升级你的项目中的swiper库到5.2.0或更高版本&#xff0c;以满足vue-awesome-swiper的需求。你可以使用以下命令来进行升级&#xff1a; npm install swiperlatest 注意…

MPLS VPN跨域A

拓扑设计 拓扑介绍 如图&#xff0c;上海分公司与山东分公司之间为保证业务可以互通&#xff0c;需要使用MPLS VPN技术进行连接。中间R3与R4之间运行IGP&#xff0c;使用IGP传递路由&#xff0c;因为网络需要经过联通与移动两个AS域&#xff0c;所以使用MPLS VPN OptionA方案来…

SDXL prompt 笔记

模型 模型有两个&#xff0c;分别是 stable-diffusion-xl-base-1.0、stable-diffusion-xl-refiner-1.0。 base 模型是用来做文生图&#xff0c;refiner 模型是用来做图生图的。 SDXL 模型之 base、refiner 和 VAE_云水木石的博客-CSDN博客 分辨率 默认是1024*1024&#xf…

SAP MM学习笔记33 - 请求书照合中修改 带勘定设定Category(科目分配)的发票

请求书照合&#xff0c;对照的是 客户或供应商发过来发票。 带勘定设定Category&#xff08;科目分配&#xff09;的发票&#xff0c;一般是消耗品。 不过是否是消耗品&#xff0c;对供应商来说&#xff0c;跟他们没关系&#xff0c;供应商只是卖商品给你&#xff0c;怎么用是…

【建造者模式】

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《20种Java设计模式》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#x…

【AIGC】文心一言 - 生成中秋祝福语、诗词、图像、相关代码等

文心一言 - 生成中秋祝福词、诗、画 引言一、中秋祝福语二、中秋诗词三、中秋图像 - 闪亮的月亮四、中秋代码 引言 文心一言是百度推出国产聊天GPT产品&#xff0c;不仅可以与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;还能进行数据分析、逻辑判断、绘画…

代码随想录算法训练营day53|1143.最长公共子序列|1035.不相交的线|53. 最大子序和

1143.最长公共子序列 力扣题目链接 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长公共子序列的长度。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&#xff08;也可以不删除任何…

【链表】反转链表 II-力扣 92 题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

【Linux】线程池 | 自旋锁 | 读写锁

文章目录 一、线程池1. 线程池模型和应用场景2. 单例模式实现线程池(懒汉模式) 二、其他常见的锁1. STL、智能指针和线程安全2. 其他常见的锁 三、读者写者问题1. 读者写者模型2. 读写锁 一、线程池 1. 线程池模型和应用场景 线程池是一种线程使用模式。线程过多会带来调度开…

Linux安装kafka-manager

相关链接https://github.com/yahoo/kafka-manager/releases kafka-manager-2.0.0.2下载地址 百度云链接&#xff1a;https://pan.baidu.com/s/1XinGcwpXU9YBF46qkrKS_A 提取码&#xff1a;tzvg 一、安装部署 1.把kafka-manager-2.0.0.2.zip拷贝到目录 /opt/app/elk 2.解压…

【Python】让Anaconda不再下载慢下载失败,Anaconda的下载源更换为国内源(保姆级图文)

目录 对于源的添加与修改1. 查看源3. 移除源4. 恢复默认源 检查添加源是否生效清理原来的索引配置总结 欢迎关注 『Python』 系列&#xff0c;持续更新中 欢迎关注 『Python』 系列&#xff0c;持续更新中 对于源的添加与修改 1. 查看源 conda config --show-sources## 2. 添…

天宇微纳芯片ic测试软件如何测试芯片上下电功能?

芯片的上电与下电功能测试是集成电路生产和研发过程中的关键环节&#xff0c;可以帮助企业确保产品的可靠性、整合性和兼容性&#xff0c;同时提高生产效率和产品质量。 因此在芯片的研发设计中&#xff0c;企业会对芯片的上下电有严格的要求&#xff0c;包括上下电的时序&…

飞腾主板显卡接eDP屏,显示花屏问题

故障现象: 开机过程中,在系统启动前无显示输出的阶段中。会有随机的白色竖条显示,位置不固定,且会抖动。 硬件环境: FT-1500A/16+显卡e8860; eDP屏京东方NV156FHM-N42; eDP屏数据(DP0+/-、DP1+/-、AUX)接口e8860直出; eDP屏背光接口控制BL_EN、BL_PWM由主板CPLD…

主要的经典模拟电路图 你都完懂了吗?

经典模拟电路图是电子学中非常重要的概念之一&#xff0c;在各种电子设备中&#xff0c;我们都可以看到这些电路图的身影。 一、差分放大电路&#xff0c;具有电路对称性的特点&#xff0c;此特点可以起到稳定工作点的作用&#xff0c;被广泛用干直接耦合电路和测量电路的输入级…

SSM02

SSM02 此时我们已经做好了登录模块接下来可以做一下学生管理系统的增删改查操作 首先&#xff0c;我们应当有一个登录成功后的主界面 在webapp下新建 1.main.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

各种电机驱动原理

步进电机 步进电机参考资料 野火官方文档 步进电机驱动原理 上面参考文档中有的内容就不写了&#xff0c;写一下我自己的总结吧。 说明&#xff1a; 电机驱动器输入信号有电机转动方向信号DIR&#xff0c;电机转速信号PWM&#xff0c;电机使能信号EN&#xff1b;电机驱动器…

JVM调优工具

JVM调优工具 Jmap 查看类信息 此命令可以查看内存信息&#xff0c;实例个数以及占用内存大小。 num&#xff1a;序号instances&#xff1a;实例数量bytes&#xff1a;占用空间大小class name&#xff1a;类名称&#xff0c;[C is a char[]&#xff0c;[S is a short[]&#…