parking_operation/components/tableRanking.vue

<!-- 表格 -->
<template>
	<view class="container">
		<view class="table">
			<view class="table-title" v-if="title">{{ title }}</view>
			<view class="table-box">
				<uni-table emptyText="暂无更多数据" :loading="loading">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th class="table-box-th" align="center" v-for="(item, index) in tableTh" :key="index"
							:width="item.width || ''">{{ item.field }}
						</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData.list" :key="index">
						<uni-td class="table-box-td" align="center" v-for="(field, index) in tableTh" :key="index">
							{{ item[field.key] }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="table-pagination" v-if="tableData.total > 0">
				<uni-pagination show-icon="true" :total="tableData.total" :current="tableData.current" @change="pageChange"></uni-pagination>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			loading: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			tableTh: {
				type: Array,
				default: () => {
					return []
				}
			},
			tableData: {
				type: Object,
				default: () => {
					return {
						current: 1,
						total: 0,
						list: []
					}
				}
			}
		},
		methods: {
			pageChange(e) {
				this.$emit('pageChange', e.current)
			}
		}
	}
</script>
/**
 * tableTh
 * [{ width: '', field: '', key: '' }]   width表示单列的宽度  field表示单列的表头名称  key表示单列字段名
 */

<style lang="scss" scoped>
	@import '@/pages/dataOverview/statisticalReport/components/report.scss';
</style>