uniapp uni-table最简单固定表头

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

1.效果

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

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

html 复制代码
<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>

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

相关推荐
阿哈832 小时前
A6481 基于Java+mysql+Vue+MySQL+uni-app在线商城系统微信小程序的设计与实现 配置 源码 全套资料
java·vue.js·mysql·微信小程序·uni-app
rm_ing5 小时前
uniapp-在windows上IOS真机运行(含开发证书申请流程)
ios·uni-app
学如逆水,不进则退11 小时前
uniapp的多列选择器
uni-app
学如逆水,不进则退11 小时前
uniappp配置导航栏自定义按钮(解决首次加载图标失败问题)
前端·uni-app
竣子好逑11 小时前
uniapp vue2 自定义悬浮按钮
前端·javascript·uni-app
ZD71782202311 小时前
uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能
javascript·vue.js·小程序·uni-app
m0_7482345217 小时前
webstorm开发uniapp(从安装到项目运行)
uni-app·notepad++·webstorm
m0_7482487717 小时前
【前端 Uniapp】使用Vant打造Uniapp项目(避坑版)
前端·uni-app
Qin_jiangshan17 小时前
使用HBuilderX 进行uniapp 打包Android APK
android·uni-app