front-end/jdApp/src/components/app-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}upx` : '1',
					textAlign: item.align || 'left',
					fontSzie: `${headerFontSize}upx`,
					margin: `0 ${gutter}upx`
				}"
			>
				<!-- <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}upx` : '1',
					textAlign: column.align || 'left',
					fontSzie: `${fontSize}upx`,
					margin: `0 ${gutter}upx`
				}"
			>
				<!-- {{ item[column.dataIndex] || "" }} -->

				<slot
					v-if="column.custom"
					:row="item"
					:column="column"
					:index="index"
					:parentData="parentData"
				>
					{{ item[column.dataIndex] || "" }}
				</slot>
				<text v-else :class="[column.color || '']">
					{{ (column.dataIndex && item[column.dataIndex]) || "" }}
				</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		parentData: {},
		columns: {
			type: Array,
			default: []
		},
		dataList: {
			type: Array,
			default: []
		},
		headerBackgroundColor: {
			type: String,
			default: "#ffffff"
		},
		fontSize: {
			type: Number,
			default: 24
		},
		headerFontSize: {
			type: Number,
			default: 24
		},
		gutter: {
			type: Number,
			default: 10
		}
	},
	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: 0upx 1upx 0upx 0upx #eeeeee;
		color: #999999;
		.table-th {
			white-space: nowrap;
		}
	}
	.table-tr {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		border-bottom: 1upx solid #eeeeee;
		color: #999999;
		.table-td {
			.warn {
				color: #ffaf1d;
			}
			.fail {
				color: #f51608;
			}
			.success {
				color: #09bb07;
			}
			.info {
				color: #333;
			}
		}
	}
}
</style>