适用于简单表格展示的组件封装

功能虽然没有element ui那样强大，但也比Uview好用一点(有点夸大，哈哈哈哈)，废话少说上代码

主页面调用

<template>
	<view class="content">
		<mtable :border="true" :date="obj" :topbgcolor="tColor" :bodybgcolor="bColor" :bcolor="tbColor">
			<ntable props="name" title="姓名"></ntable>
			<ntable props="age" title="年龄"></ntable>
			<ntable props="class" title="班级"></ntable>
		</mtable>
	</view>
</template>

<script>
	import mtable from "../../components/mtable.vue"
	import ntable from"../../components/ntable.vue"
	export default {
		components: {
			mtable,
			ntable
		},
		data() {
			return {
				obj: [{
					name:'张三',
					age:12,
					class:'五年级一班'
				},{
					name:'李四',
					age:12,
					class:'六年级三班'
				},{
					name:'王五',
					age:'',
					class:'六年级二班'
				},{
					name:'马六',
					age:11,
					class:'四年级三班'
				},{
					name:'冯七',
					age:9,
					class:'四年级五班',
				},{
					name:'王八',
					age:9,
					class:'三年级五班',
				}],
				tColor:'#254864',
				bColor:'#eeeeee',
				tbColor:'#cccccc'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

mtable

<template>
	<view class="mytable" :style="[tablestyle]" ref="my">
		<slot></slot>
	</view>
</template>

<script>
	import ntable from './ntable.vue'
	export default {
		components:{
			ntable
		},
		name:"mtable",
		props:{
			//是否添加边框
			border:{
				type:[String,Boolean],
				dafault:true
			},
			//数据
			date:{
				type:[Array]
			},
			//边框颜色
			bcolor:{
				type:[String],
				default:'#cccccc'
			},
			//表格头部背景颜色
			topbgcolor:{
				type:[String],
				default:'#cccccc'
			},
			//表格内容背景颜色
			bodybgcolor:{
				type:[String],
				default:'#cccccc'
			}
		},
		data() {
			return {
				test:'sdsad',
				mobj:this.date,
				borderColor:this.bcolor,
				topBgColor:this.topbgcolor,
				bodyBgColor:this.bodybgcolor
			};
		},
		computed:{
			tablestyle(){
				let style={};
				//根据所传的布尔值判断是否需要边框，默认需要边框
				if(this.border){
					style.borderLeft=`1rpx solid ${this.bcolor}`;
					style.borderTop=`1rpx solid ${this.bcolor}`;
					style.borderBottom=`1rpx solid ${this.bcolor}`
				}
			}
		},
		mounted() {
			console.log(this.date)
		}
	}
</script>

<style scoped>
	.mytable{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #cccccc;
		/* border-top: 1rpx solid #cccccc;
		border-left: 1rpx solid #cccccc; */
	}
</style>

ntable

<template>
	<view class="nt" :style=[tableStyle]>
		<view class="t_top" :style="[topStyle]">
			{{title}}
		</view>
		<view class="t_body" v-for="(item,index) in tempt" :key="index" :style="[bodyStyle]">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "ntable",
		props: {
			name: [String],
			title:[String],
		},
		data() {
			return {
				tempt:[]
			};
		},
		mounted() {
			let flag = this.$attrs.props
			this.$parent.$parent.$data.mobj.map(item=>{
				for(var k in item){
					if(k==flag){
						this.tempt.push(item[k])
					}
				}
			});
			// console.log(this.$parent.$parent.$data)
		},
		computed:{
			//调整表格样式
			topStyle(){
				let style={}
				let tempt = this.$parent.$parent.$data
				if(tempt.topBgColor !='#cccccc'){
					style.color="#eeeeee"
				}
				style.backgroundColor=this.$parent.$parent.$data.topBgColor
				return style
			},
			tableStyle(){
				let style={}
				style.borderRight=`1rpx solid ${this.$parent.$parent.$data.borderColor}`
				return style
			},
			bodyStyle(){
				let style={}
				style.borderTop=`1rpx solid ${this.$parent.$parent.$data.borderColor}`
				style.backgroundColor=this.$parent.$parent.$data.bodyBgColor
				return style
			}
		}
	}
</script>

<style scoped>
	.nt {
		/* background-color: aqua; */
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		/* border-right: 1rpx solid #cccccc; */
	}
	.t_top{
		width: 100%;
		height: 50rpx;
		/* background-color: bisque; */
		line-height: 50rpx;
		text-align: center;
	}
	.t_body{
		width: 100%;
		height: 50rpx;
		/* background-color: red; */
		/* border-top: 1rpx solid #cccccc; */
		line-height: 50rpx;
		text-align: center;
	}
</style>

最终效果图

此组件有很大的扩展空间，欢迎道友指点