qsy-zdh/components/chart/table.vue

<template>
	<view class="table-wrap">
		<view class="table-head">
			<view v-for="(item, index) in tableHead" :key="index" class="th">
				{{ item }}
			</view>
		</view>
		<view v-for="(item,index) in list" :key="index" class="table-body">
			<view class="tb">
				{{ item.name }}
			</view>
			<view class="tb" v-for="(item1,index1) in item.params" :key="index1" :style="{color: fontColor(item1)}">
				<template v-if="item1.status !== undefined && item1.data === undefined">
					<view :class="item1.status ? 'success' : 'error'"></view>
				</template>
				<template v-else>{{ item1.data ? item1.data : item1 }}</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: ['list', 'tableHead'],
		onLoad() {
	
		},
		methods: {
			fontColor(data) {
				if (data.data && data.status) {
					return '#00FF00'
				} else if (data.data && !data.status) {
					return '#FF0000'
				} else {
					return '#000000'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.table-wrap {
		.table-head {
			display: flex;
			align-items: center;
			height: 92rpx;
			.th {
				flex: 1;
				font-weight: 700;
				font-size: 28rpx;
				color: #7A7A7A;
				text-align: center;
			}
		}
		.table-body {
			display: flex;
			align-items: center;
			border-top: 1px dashed #E5E5E5;
			.tb:first-child {
				font-size: 28rpx;
				color: #A1A1A1;
			}
			.tb {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #000000;
				flex: 1;
				text-align: center;
				padding: 23rpx 0;
				height: 100%;
				
				.success {
					width: 38rpx;
					height: 38rpx;
					background: #00BD00;
					border-radius: 6rpx;
				}
				
				.error {
					width: 38rpx;
					height: 38rpx;
					background: #D6000F;
					border-radius: 6rpx;
				}
			}
		}
	}
</style>