当前位置：首页 > article >正文

uniapp简单table表

article 2025/3/11 19:18:35

<template>
	<view class="container">
		<scroll-view scroll-x="true" scroll-y="true" class="table-scroll">
			<view class="table-header">
				<view class="table-cell fixed-column">序号</view>
				<view class="table-cell fixed-column">姓名</view>
				<view class="table-cell" v-for="(header, index) in headers" :key="index">{{ header }}</view>
			</view>
			<view class="table-body">
				<view class="table-row" v-for="(row, rowIndex) in data" :key="rowIndex">
					<view class="table-cell fixed-column">{{ row.id }}</view>
					<view class="table-cell fixed-column">{{ row.name }}</view>
					<view class="table-cell" v-for="(cell, cellIndex) in row.cells" :key="cellIndex">{{ cell }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			headers: ['列1', '列2', '列3', '列4', '列5'],
			data: [
				{ id: 1, name: '张三张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 2, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 3, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 4, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 5, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 6, name: '张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 7, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 8, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 9, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 10, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 11, name: '张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 12, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 13, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 14, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 15, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 16, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 17, name: '张三', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 18, name: '李四', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 19, name: '王五', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 20, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 21, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 22, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 23, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 24, name: '赵六', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] },
				{ id: 25, name: '孙七', cells: ['数据1', '数据2', '数据3', '数据4', '数据5'] }
			]
		};
	}
};
</script>

<style scoped>
.container {
	height: 100vh;
	overflow: hidden;
	padding-bottom: 0;
	padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}

.table-scroll {
	height: 100%;
}
.table-header {
	position: sticky;
	top: 0;
	z-index: 10;
}

.table-header,
.table-row {
	display: flex;
}

.table-cell {
	flex: 1;
	min-width: 180rpx;
	padding: 10rpx;
	border: 1rpx solid #ddd;
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

.fixed-column {
	position: sticky;
	left: 0;
	background-color: #f0f0f0;
	z-index: 1;
}

.table-header .fixed-column:nth-child(1) {
	z-index: 2; /* 确保第一列在最上层 */
	left: 0rpx; /* 实际上这个left属性对于第一列来说是多余的，因为它默认就是0 */
}

.table-body .fixed-column:nth-child(1) {
	z-index: 2; /* 确保第一列在最上层 */
	left: 0; /* 第一列固定在左侧 */
}

/* 由于上面的CSS变量和计算方式在Vue中不直接支持，我们可以采用以下替代方案： */
.table-body .fixed-column:nth-child(1) {
	/* 假设每列的宽度是100px，且没有列间距 */
	left: 0rpx; /* 根据实际列宽调整 */
}

/* 为了简化示例，这里我们假设每列宽度相同且没有列间距，实际项目中可能需要根据设计调整 */
</style>