<template> <view class="table"> <view class="table-header"> <!-- 表格的表头 --> <view class="flex-1 text-center" v-for="item in header" :key="item">{{ item }}</view> </view> <!-- 表格的内容 --> <view class="table-row" v-for="(item,index) in data" :key="index"> <view class="table-cell"> <view>{{item.materialsName}}</view> <view>({{item.lowestPriceRange}}-{{item.highestPriceRange}})</view> </view> <view class="table-cell">{{item.area}}</view> <view class="table-cell">{{(Number(item.lowestPriceRange) * Number(item.area)) }} - {{ (Number(item.highestPriceRange) * Number(item.area))}}</view> </view> </view> </template> <script> export default { props: { header: { // 表头数据 type: Array, default: () => [] }, data: { // 表格内容数据 type: Array, default: () => [] } }, methods: { // 表格的点击事件 handleRowClick(row) { console.log("点击了一行数据:", row); } } } </script> <style scoped> .table-header { display: flex; align-items: center; font-size: 26rpx; color: #666666; width: 100%; border-collapse: collapse; margin-bottom: 24rpx; } .table-cell { flex: 1; text-align: center; font-size: 24rpx; color: #333333; } .table-row { display: flex; align-items: center; } .table-row:not(:last-child){ margin-bottom: 40rpx; } /* .table-row:hover { background-color: #f5f5f5; cursor: pointer; } */ </style>