效果图如下:
思路:
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('.uni-table-tr')
.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>