移动端简易的table表格_mobile-table npm-优快云博客

本文链接：https://blog.youkuaiyun.com/hello917/article/details/106142415

此博客介绍了一个用于展示酒店房间业绩的UI组件实现，包括房间号、业绩金额、可提成金额及赠送金额等关键信息，通过循环遍历数据列表进行动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
	<view>
		<view class="flex ac Dark" style="color: white;">
			<view class="p-2 " style="width:25%;text-align: center;">
				房间号
			</view>
			<view class="p-2 " style="width:25%;text-align: center;">
				业绩金额
			</view>
			<view class="p-2 " style="width:25%;text-align: center;">
				可提成金额
			</view>
			<view class="p-2 " style="width:25%;text-align: center;">
				赠送金额
			</view>
		</view>
		<block v-for="(item,index) in dataList" :key="index">
			<view class="flex ac Dark" :class="{'colour':index%2!=1}" style="color: #919DB5;">
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.num}}
				</view>
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.price}}
				</view>
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.tprice}}
				</view>
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.zprice}}
				</view>   
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			dataList:Array,
		},
		methods: {
			
		}
	}
</script>

<style>
.p-2{
	padding: 20rpx;
}
.flex{
	display: flex;
}
.ac{
	align-items: center;
}
.Dark{
	background-color: #37435F;
}
.colour{
	background-color: #313D58;
}
</style>