uniapp简单table表

复制代码
<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>

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css