固定表头、首列 —— uniapp、vue 项目

news2025/3/11 20:08:21

项目实地：也可以在【微信小程序】搜索体验：xny.handbook

另一个体验项目：官网

一、效果展示

二、代码展示

（1）html 部分

<view class="table">
     <view class="tr">
 		<view class="th">股票代码	</view>
 		<view class="th">建议投金额	</view>
 		<view class="th">实际投金额	</view>
 		<view class="th">建议股数	</view>
 		<view class="th">实际股数	</view>
 		<view class="th">◎原单价		</view>
 		<view class="th">涨出-单价 ↑	</view>
 		<view class="th">跌出+单价 ↓	</view>
 		<view class="th">+○预赚		</view>
 		<view class="th">+●实赚		</view>
 		<view class="th">-○预赔		</view>
 		<view class="th">-●实赔		</view>
 		<view class="th">操作		</view>
     </view>
     <block v-for="(item, index) in tableUpData" :key="index">
        <view class="tr">
        <view class="td">{{item.stockCode}}</view>
 		<view class="td">{{ item.calculAdvsIvsMoney  		}}</view>
 		<view class="td">{{ item.calculRealIvsMoney  		}}</view>
 		<view class="td">{{ item.tradeCount 			    }}</view>
 		<view class="td">{{ item.tradeRealCount 			}}</view>
 		<view class="td">{{ item.unitPriceNow 			    }}</view>
 		<view class="td"> <span :style="fontColor.up" 	> {{ item.upOutUnitPrice 			}} </span> </view>
 		<view class="td"> <span :style="fontColor.down" > {{ item.downOutUnitPrice 			}} </span> </view>
 		<view class="td"> <span :style="fontColor.up"   > {{ item.expectIncomeMoney 		}} </span> </view>
 		<view class="td"> <span :style="fontColor.up"   > {{ item.expectIncomeMoneyReal 	}} </span> </view>
 		<view class="td"> <span :style="fontColor.down" > {{ item.expectOutcomeMoney 		}} </span> </view>
 		<view class="td"> <span :style="fontColor.down" > {{ item.expectOutcomeMoneyReal 	}} </span> </view>
 		<view class="td">
 			<view class="uni-group">
 				<button @tap="addOrUpdateOne(item, 'addOne')" class="uni-button" style="background-color: #e1f3d8; color: #09bb07;" size="mini" type="primary" v-if="isNewStockCode">新收</button>
 				<button @tap="addOrUpdateOne(item, 'updateOne')" class="uni-button" style="background-color: #e1f3d8; color: #e6a23c;" size="mini" type="warn" v-if="isNewStockCode==false">更新</button>
 			</view>
 		</view>
        </view>
     </block>
 </view>

（2）css 部分

	/* ----------------------- */
	/* 固定首行首列 */
	.table-container{
	  width: 100%;
	  height: 70vh;
	  position: absolute;
	}
	/* 下面这里必须要有overflow:auto;,结合上面外部的 position: absolute; 才可以实现首行首列固定 */
	.table{
	  width: 100%;
	  max-height: 70vh;
	  overflow:auto;
	  position: relative;
	}
	.tr {
	      display: flex;
		  min-width: max-content; /* 保留内容宽度基准 */
		  width: 100%;    /* 至少充满容器宽度 */
	  }
	.th,.td {
		flex: 1;  /* 关键：自动分配剩余空间 */
	    min-width: 100px; /* 对每个单元格设置宽高, 宽同表格一致 */
	    height: 30px;
	    /* 每个格背景设置透明, 滑动的时候就好隐藏 */
	    /*  background-color: #fff; */
	    display: flex;
	    justify-content: center;
	    align-items: center;
		font-size: 14px;
		color: #6a6a6a;
		border-top: 1px solid #e8e8e8; /* 边框 */
		border-right: 1px solid #e8e8e8; /* 右侧边框 */
		border-bottom: 1px solid #e8e8e8; /* 底部边框 */
	}
	.th{
	    /* 设置背景色, 滑动的时候就不会重叠字样了. */
	    background-color: #f4f6ff;
	    text-align: center;
		font-weight: bold;
	}
	 
	/* 表头部分 */
	.tr:first-child {
	    /* 将第一个格设置 sticky, 往上滑则固定住 */
	    position: sticky;
	    top: 0;
	    /* 提升表格的重叠权重, 显示出来, 同时将内容设置为透明, 就实现了固定表头的效果 */
	    z-index: 2;
	    background-color: aqua;
	}
	
	/* 隔行背景色 */
	.tr:nth-child(even) .td {
		background-color: #f8f9fa; /* 偶数行 */
	}
	.tr:nth-child(odd) .td {
		background-color: #ffffff; /* 奇数行 */
	}
	 
	/* 首行第一个单元格进行固定 */
	/* 每行第一个单元格进行固定, 宽度和表格一致对齐 */
	.th:first-child,
	.td:first-child{
	    position: sticky;
	    width: 100px;   /* 固定宽度不参与flex分配。最好与 .th,.td 中 min-width 值一致，否则会出现 错乱对不齐  */
	    left: 0;
		z-index: 1;
		/* flex: 0 0 150rpx; 固定宽度不参与flex分配 */
	    /* background-color: aquamarine; */
		/* background-color: #f4f6ff !important; /* 覆盖隔行颜色  */
	}
	 
	/* 将滚动条设置隐藏 */
	::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	}
	
	/* 防止列挤压 */
	.th:not(:first-child),
	.td:not(:first-child) {
	  flex-shrink: 0;
	}