<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>
