front-end/ghs/src/admin/warehouse/components/table.vue

<template>
	<view class="table-view">
		<view
			class="table-header"
			:style="{ backgroundColor: headerBackgroundColor }"
		>
			<view
				class="table-th"
				v-for="(item, index) in columns"
				:key="index"
				:style="{
					flex: item.width ? `0 0 ${item.width}rpx` : '1',
					textAlign: item.align || 'left',
					fontSzie: `${fontSize}rpx`
				}"
			>
				<!-- <slot :name="item.dataIndex" > -->
				{{ item.name || "" }}
				<!-- </slot> -->
			</view>
		</view>
		<view class="table-tr" v-for="(item, index) in dataList" :key="index">
			<view
				class="table-td"
				v-for="(column, columnIndex) in columns"
				:key="columnIndex"
				:style="{
					flex: column.width ? `0 0 ${column.width}rpx` : '1',
					textAlign: column.align || 'left',
					fontSzie: `${fontSize}rpx`
				}"
			>
				<!-- {{ item[column.dataIndex] || "" }} -->

				<slot v-if="column.custom" :row="item" :column="column">
					{{ item[column.dataIndex] }}
				</slot>
				<text v-else :class="[column.color || '']">
					{{ item[column.dataIndex] }}
				</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		columns: {
			type: Array,
			default: []
		},
		dataList: {
			type: Array,
			default: []
		},
		headerBackgroundColor: {
			type: String,
			default: "#ffffff"
		},
		fontSize: {
			type: String,
			default: 24
		}
	},
	mounted() {
		for (let index = 0; index < this.$children.length; index++) {
			const element = this.$children[index];
			console.log(33333, element, element.$attrs);
		}
	},
	methods: {
		childrenItem(name) {
			let item = null;
			for (let index = 0; index < this.$children.length; index++) {
				const element = this.$children[index];
				if (element.$options.name == "table-item") {
				}
			}
			return;
		}
	}
};
</script>
<style lang="scss" scoped>
.table-view {
	.table-header {
		display: flex;
		padding: 20upx 30upx;

		box-shadow: 0px 1px 0px 0px #eeeeee;
		color: #999999;
		.table-th {
		}
	}
	.table-tr {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		border-bottom: 1px solid #eeeeee;
		color: #999999;
		.table-td {
			.warn {
				color: #ffaf1d;
			}
			.fail {
				color: #f51608;
			}
			.success {
				color: #09bb07;
			}
			.info {
				color: #333;
			}
		}
	}
}
</style>