uni-table实现固定列

使用position:sticky实现

.table-thead {
	background-color: #FFFAF2 !important;
	position: sticky;
	left: 0;
	top: 0;
	z-index: 20;
}
/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: #FFFAF2;
			z-index: 10;
		}
//固定表头第一列(需计算第一列宽度,我这里是200rpx)
/deep/ .uni-table-tr .uni-table-th:nth-child(2), {
			position: sticky;
			left: 200rpx;
			top: 0;
			background-color: #FFFAF2;
			z-index: 10;
		}

//冻结thead第一列
/deep/ .uni-table-tr .uni-table-td:first-child {
			position: sticky;
			left: 0;
			top: 0;
			background-color: #fff;
			z-index: 10;
		}
//冻结thead第二列(需计算第一列宽度)
/deep/ .uni-table-tr .uni-table-td:nth-child(2) {
			position: sticky;
			left: 200rpx;
			top: 0;
			background-color: #fff;
			z-index: 10;
		}

uni-table 固定表头代码可以通过以下方式实现: <uni-table :data="tableData" :height="300"> <uni-table-column type="index" width="50"></uni-table-column> <uni-table-column prop="name" label="姓名" width="100"></uni-table-column> <uni-table-column prop="age" label="年龄" width="100"></uni-table-column> <uni-table-column prop="address" label="地址" width="200"></uni-table-column> <uni-table-column prop="phone" label="电话" width="150"></uni-table-column> <uni-table-column prop="email" label="邮箱" width="200"></uni-table-column> <uni-table-column prop="remark" label="备注"></uni-table-column> <template slot="header"> <uni-table-column type="index" width="50"></uni-table-column> <uni-table-column prop="name" label="姓名" width="100"></uni-table-column> <uni-table-column prop="age" label="年龄" width="100"></uni-table-column> <uni-table-column prop="address" label="地址" width="200"></uni-table-column> <uni-table-column prop="phone" label="电话" width="150"></uni-table-column> <uni-table-column prop="email" label="邮箱" width="200"></uni-table-column> <uni-table-column prop="remark" label="备注"></uni-table-column> </template> </uni-table> 以上代码中,使用了 uni-table 组件,通过设置 :height 属性可以设置表格的高度,使用 <uni-table-column> 标签来定义表格的,通过设置 prop 属性来绑定数据源中的字段,设置 label 属性来定义的标题,设置 width 属性来定义的宽度。使用 <template slot="header"> 标签来定义表头,将表头的与表格的设置相同即可实现固定表头效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值