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>

相关推荐
Hilaku1 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
iOS阿玮2 分钟前
为什么独立开发者都在AppStore而不去安卓市场?
uni-app·app·apple
南岸月明3 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD17 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip22 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济27 分钟前
后端程序员的CSS复习
前端
Enddme30 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员32 分钟前
微信小程序使用 Tailwind CSS version 3
前端
你怎么知道我是队长1 小时前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt