uniapp 实现表格滚动、固定列

1.用table的样式写，推荐用这种写比较方便

<template>
	<view>
		<h3 style="text-align: center;">用 table 样式写</h3>
		<view style="margin: 20upx;">
			<scroll-view scroll-x="true" scroll-y="true"  
				style="border: 1upx solid #eee; width: 100%;height: 400upx;" @scrolltolower="lower">
				<view class="table" :style="[{'width':tableWidth()}]">
					<!-- 表头 -->
					<!-- 固定列样式用title-cell-left 或 title-cell-right -->
					<view class="table-header">
						<view :class="item1.type" :style="[{'width':item1.width + 'upx'}]"  v-for="(item1,index1) in headerList" :key="index1">
							<view class="cell ">{{item1.title}}</view>
						</view>
					</view>
					<!-- 数据行 -->
					<view class="table-body">
						<view class="table-tr" v-for="(item2,index2) in dataList" :key="index2">
							<view :class="headerList[0].type" :style="[{'width':headerList[0].width + 'upx'}]">
								<view class="cell ">{{item2.id}}</view>
							</view>
							<view :class="headerList[1].type" :style="[{'width':headerList[1].width + 'upx'}]">
								<view class="cell " style="text-align: center;">{{item2.name}}</view>
							</view>
							<view :class="headerList[2].type" :style="[{'width':headerList[2].width + 'upx'}]">
								<view class="cell ">{{item2.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerList:[
					{
						title:'id',
						width: 100,
						type:'title-cell-left'
					},
					{
						title:'姓名',
						width: 200,
						type:'content-cell'
					},
					{
						title:'地址',
						width: 600,
						type:'content-cell'
					}
				],
				dataList:[
					{
						id:'001',
						name:'张三',
						address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
					},
					{
						id:'002',
						name:'张三',
						address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
					},
					{
						id:'003',
						name:'张三',
						address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
					},
					{
						id:'004',
						name:'张三',
						address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
					}
				],
				
			}
		},
		created() {
			this.tableWidth()
		},
		methods: {
			//计算表格宽度
			tableWidth() {
				let width = 0;
				this.headerList.forEach(item => {
					width += item.width ;
				})
				return width + 'upx';
			},
            //滚动到底部加载下一页
            lower(){
            }
		}
	}
</script>

<style lang="scss" scoped>
	$border-color: #E4E4E4;
	$border: 1rpx solid $border-color;
	$white: #FFFFFF;
	$title-color: #f8f8f8;
	
	.table {
		display: table;
		.table-header {
			background-color: $title-color;
			position: sticky;
			top: 0;
			z-index: 2;
			
			.title-cell{
				display: table-cell;
				border: $border;
				text-align: center;
				position: relative;
				vertical-align: middle;
			}
	
			.title-cell-left {
				border: $border;
				position: relative;
				position: sticky;
				left: 0;
				z-index: 1;
				text-align: center;
				background-color: $title-color;
			}
			.title-cell-right{
				border: $border;
				position: relative;
				position: sticky;
				right: 0;
				z-index: 1;
				text-align: center;
				background-color: $title-color;
			}
	
			.content-cell {
				border-top: $border;
				border-bottom: $border;
				border-right: $border;
				text-align: center;
				
			}
		}
	
		.table-body {
			.table-tr {
				display: table-row;
				.title-cell{
					display: table-cell;
					border-left: $border;
					border-right: $border;
					border-bottom: $border;
					vertical-align: middle;
				}
				
				.title-cell-left {
					border-left: $border;
					border-right: $border;
					border-bottom: $border;
					position: sticky;
					left: 0;
					z-index: 1;
					background-color: white;
				}
				
				.title-cell-right {
					border-left: $border;
					border-right: $border;
					border-bottom: $border;
					position: sticky;
					right: 0;
					z-index: 1;
					background-color: white;
				}
	
				.content-cell {
					border-bottom: $border;
					border-right: $border;
				
				}
			}
		}
	
		.title-cell-left,.title-cell-right{
			display: table-cell;
			vertical-align: middle;
		}
	
		.content-cell {
			display: table-cell;
			vertical-align: middle;
		}
	
		.cell {
			padding: 10rpx;
			line-height: 1.6;
			word-wrap: break-word;
			word-break: break-all;
		}
	}
	
	

	

</style>

2.table

（1）固定列需要计算下left多少或者right多少

（2）固定列后border会变成透明，可以用css的outline（轮廓线）样式实现，outline是不占空间的

<template>
	<view>
		<h3 style="text-align: center;">	table</h3>
		<view style="margin: 20upx;">
			<scroll-view scroll-x="true" scroll-y="true"
				style="border: 1upx solid #eee; width: 100%;height: 250upx;" >
				<view class="table-y">
					<table :style="[{'width':tableWidth()}]"  >
						<thead>
							<tr  >
								<th class="table-th" 
									:style="[{'width':item3.width + 'upx',
										'left':(item3.left ? item3.left + 'upx':''),
										'z-index':(item3.left ? 80 :20)
										}]"  
									v-for="(item3,index3) in headerList1" :key="index3">
									{{item3.title}}
								</th>
							</tr>
						</thead>
						<tbody>
							<tr  v-for="(item4,index4) in dataList1" :key="index4">
								<td :style="[{'width':headerList1[0].width + 'upx',
											'left':(headerList1[0].left ? headerList1[0].left + 'upx':''),}]"
									:class="headerList1[0].left ?  'table-td-left':''">
									{{item4.id}}
								</td>
								<td :style="[{'width':headerList1[1].width + 'upx',
											'left':(headerList1[1].left ? headerList1[1].left + 'upx':''),}]"
									:class="headerList1[1].left ?  'table-td-left':''">
									{{item4.name}}
								</td>
								<td :style="[{'width':headerList1[2].width + 'upx'}]">
									{{item4.address}}
								</td>
							</tr>
						</tbody>
					</table>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerList1:[
					{
						title:'id',
						width: 100,
						type:'title-cell-left',
						left:'1'
					},
					{
						title:'姓名',
						width: 120,
						type:'content-cell',
						left:'101' //table自带的样式导致由111变成了117
					},
					{
						title:'地址',
						width: 600,
						type:'content-cell'
					}
				],
				dataList1:[
					{
						id:'001',
						name:'李四',
						address:'xxxxxxxxxxxxxxxxxxxxxx'
					},
					{
						id:'002',
						name:'李四',
						address:'xxxxxxxxxxxxxxxxxxxxxx'
					},
					{
						id:'003',
						name:'李四',
						address:'xxxxxxxxxxxxxxxxxxxxxx'
					},
					{
						id:'004',
						name:'李四',
						address:'xxxxxxxxxxxxxxxxxxxxxx'
					}
				]
			}
		},
		created() {
			this.tableWidth()
		},
		methods: {
			//计算表格宽度
			tableWidth() {
				let width = 0;
				this.headerList1.forEach(item => {
					width += item.width ;
				})
				return width + 'upx';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.table-y{
		table{
			border-right: 1upx solid #000;
			border-bottom: 1upx solid #000;
			border-spacing: 0;
			border-collapse: collapse;
		}
		table td {
			border-left: 1upx solid #000;
			border-top: 1upx solid #000;
			text-align: center;
			border-right: 1upx solid #000;
			height: 100%;
		}
		
		
		.table-th{
			position: sticky;
			top: 1upx;
			background-color: #eee;
			border: none;
			outline-color: #000;
			outline-style: solid;
			outline-width: 1upx;
		}
		
		.table-td-left{
			position: sticky;
			background-color: white;
			border: none;
			outline-color: #000;
			outline-style: solid;
			outline-width: 1upx;
			z-index: 70;
		}
	}
</style>