uniapp、微信小程序--自定义table

最新推荐文章于 2025-05-20 13:59:09 发布

写不来代码的草莓熊

最新推荐文章于 2025-05-20 13:59:09 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app 微信小程序 notepad++

本文链接：https://blog.csdn.net/lingrer/article/details/134695560

本文讲述了作者在使用Uview和uni-ui表格组件时遇到的问题，如缺少功能（如取消边框、改变行背景色），进而选择原生View实现，详细展示了如何通过CSS控制表格样式和背景颜色的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

啥先不说直接看效果吧

最开始是用Uview写的表格但是发现属性太少了，首先就是不能取消横竖边框，最后就是没有办法改变每一行的背景颜色，他只有th-style改变表头的背景颜色

然后我选择用uni-ui的表格组件，发现他可以取消竖的边框但是还是不能改变每一行的背景颜色，

使用deep穿透也不行，

最后采用view原生写法

<view class="table">
					<view class="tr">
						<view class="th">序号</view>
						<view class="th">名称</view>
						<view class="th">次数</view>
						<view class="th">通过率</view>
					</view>
					<view class="tr" style="">
						<view class="td">
							<image src="../../static/slices/first.png" style="width: 89rpx;height: 61rpx; margin-left: -59rpx;margin-top: -8rpx; position: absolute;"></image>
						</view>
						<view class="td">张飒</view>
						<view class="td">12</view>
						<view class="td">100%</view>
					</view>
					<view class="tr">
						<view class="td" >
							<image src="../../static/slices/second.png" style="width: 89rpx;height: 61rpx; margin-left: -59rpx;margin-top: -8rpx;position: absolute;"></image>						
						</view>
						<view class="td">李斯</view>
						<view class="td">8</view>
						<view class="td">100%</view>
					</view>
					<view class="tr">
						<view class="td">
							<image src="../../static/slices/third.png" style="width: 89rpx;height: 61rpx; margin-left: -59rpx;margin-top: -8rpx;position: absolute;"></image>
						</view>
						<view class="td">王武</view>
						<view class="td">7</view>
						<view class="td">100%</view>
					</view>
					<view class="tr">
						<view class="td">4</view>
						<view class="td">王二</view>
						<view class="td">6</view>
						<view class="td">100%</view>
					</view>
					<view class="tr">
						<view class="td">5</view>
						<view class="td">麻子</view>
						<view class="td">3</view>
						<view class="td">100%</view>
					</view>
				</view>

.table {
						width: 100%;
						border-radius: 8rpx;
						display: table;
						border: 1px solid #EFEFEF;
						border-collapse: collapse;
						font-size: 28rpx;
						.th {
							text-align: center;
							color: #333333;
							padding: 20rpx 0;
							font-weight: bolder;
							display: table-cell;
						}
						.td {
							text-align: center;
							padding: 20rpx 0;
							display: table-cell;
						}			 
						.tr {
							display: table-row;
						}
					}
					.table .tr:nth-child(1){
						background-color: #F4F4F4 ;
					}
					.table .tr:nth-child(2){
						background: linear-gradient(270deg, #FFFFFF 0%, #FFF4E8 100%);
					}
					.table .tr:nth-child(3){
						background: linear-gradient(270deg, #FFFFFF 0%, #E8F3FF 100%);
					}
					.table .tr:nth-child(4){
						background: linear-gradient(270deg, #FFFFFF 0%, #FFEFF2 100%);
					}