uniapp中表格固定列（Vue）

一、编写表格：

主要是使用了 position: sticky;进行固定，不要忘记写top/left/right/bottom的数值哦~

<template>
	<view class="table-container">
		<uni-table stripe emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr style="white-space: nowrap;">
				<uni-th align="left" width="103">
					<text class="tableTh">表头1</text>
				</uni-th>
				<uni-th align="left" width="58">
					<text class="tableTh">表头2</text>
				</uni-th>
				<uni-th align="left" width="80">
					<text class="tableTh">表头3</text>
				</uni-th>
				<uni-th align="left" width="72"><text class="tableTh">表头4</text></uni-th>
				<uni-th align="left" width="96"><text class="tableTh">表头5</text></uni-th>
				<uni-th align="left" width="82"><text class="tableTh">表头6</text></uni-th>
				<uni-th align="left" width="44"><text class="tableTh">操作</text></uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr  style="white-space: nowrap;" v-for="(item, index) in tableList" :key="index">
				<uni-td><text class="tableTd">{{ item.data1 }}</text></uni-td>
				<uni-td><text class="tableTd">{{ item.data2 }}</text></uni-td>
				<uni-td><text class="tableTd">{{ item.data3 }}</text></uni-td>
				<uni-td><text class="tableTd">{{ item.data4 }}</text></uni-td>
				<uni-td><text class="tableTd">{{ item.data5 }}</text></uni-td>
				<uni-td><text class="tableTd">{{ item.data6 }}</text></uni-td>
				<uni-td><text class="tableDetail" @click="goDetail(item)">详情</text></uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: []
			}
		},
		onLoad() {
			// 初始化一下假数据
			this.tableList = []
			for(let i = 0; i < 20; i++) {
				let  obj = {}
				for(let j = 0; j < 6; j++) {
					obj[`data${j+1}`] = '这是数据数据数据数据' + parseInt(Math.random(0,1) * (j+1) * 10)
				}
				this.tableList.push(obj)
			}
		},
		methods: {
			goDetail() {
				console.log('点击详情')
			}
		}
	}
</script>

<style>

.tableTh {
	font-weight: 600;
	font-size: 22rpx;
	color: #333!important;
}
.tableTd {
	font-weight: 400;
	font-size: 22rpx;
	color: #333;
}
.tableDetail {
	font-weight: 400;
	font-size: 22rpx;
	color: #3FA7FF;
}
.uniTdGz {
	font-weight: 400;
	font-size: 22rpx;
	color: #FF9A00;
}
.uniTdLx {
	font-weight: 400;
	font-size: 22rpx;
	color: #FF2828;
}
.table-container .uni-table-td {
	background: #fff!important;
	border-bottom: none!important;
}
.table-container .uni-table-th {
	background: #F8F8FA!important;
	border-bottom: none!important;
}
.table-container .uni-table-tr:nth-child(odd) {
	background: #F8F8FA!important;
}
.table-container .uni-table-th:nth-child(1),.table-container .uni-table-td:nth-child(1){
	position: sticky;
	left: 0;
}
.table-container .uni-table-th:last-child,.table-container .uni-table-td:last-child {
	position: sticky;
	right: 0;
}
</style>

二、效果：