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>