uniapp实现表格冻结

 效果图如下：

思路：

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('.table-header')
					.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>