uniapp实现表格冻结

 效果图如下：

思路：

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

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

直接上代码

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

 
<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>