ycwh/miniapp/pages/components/table.vue

<template>
<u-grid :col="columns.length" :customStyle="{alignItems:'stretch'}">
	<u-grid-item v-for="(item,i) in gridItems" :key="i">
		<view class="t-c p-b-t-10 m-b-5 width-100 k-col height-100" 
			:class="item.type=='top'?'c-g-info-m col-info-d':(item.type=='total'?'c-g-info-m col-white':'c-g-info-l col-info')">
			{{item.text}}
		</view>
	</u-grid-item>
</u-grid>
</template>

<script>
export default {
	props: {
		columns: {
			type: Array,
			default() {
				return []
			},
		},
		datas: {
			type: Array,
			default() {
				return []
			},
		},
	},
	computed: {
		gridItems() {
			let list = []
			for (let i = 0; i < this.columns.length; i++) {//先加表头
				list.push({
					text: this.columns[i].name,
					type: 'top',
				})
			}
			for (let i = 0; i < this.datas.length; i++) {//再加数据，先遍历行
				let data = this.datas[i]
				for (let j = 0; j < this.columns.length; j++) {//再遍历列
					list.push({
						text: data[this.columns[j].key],
						type: data.rowType,
					})
				}
			}
			return list
		},
	},
	data() {
		return {
			// gridItems: [],
		}
	},
	methods: {
		refresh(columns, datas) {//这个方法好像没用
			let list = []
			for (let i = 0; i < columns.length; i++) {//先加表头
				list.push(columns[i].name)
			}
			for (let i = 0; i < datas.length; i++) {//再加数据，先遍历行
				let data = datas[i]
				for (let j = 0; j < columns.length; j++) {//再遍历列
					list.push(data[columns[j].key])
				}
			}
			this.gridItems = list
		},
	},
}
</script>

<style>
.k-col {
	/* line-height: 20px; */
}
</style>