uni-app组件四：table

uni-app并没有table，这个是我找的别人的table组件然后改成我需要的
效果图

table

<template>
   <view class="content">
   	<view class="genaral-area">
   		<view class="flex-box tc thead">
   			<view :style="{ textAlign: align, backgroundColor: titleBg,flex:(item.$operateList?'1':'1') }" class="item" v-for="(item, index) in title" :key="index" v-if="isSave||!item.$operateList">
   				<text>{{ item.label }}</text>
   			</view>
   		</view>
   		<view class="flex-box tc" v-for="(item, index) in tableData" :key="index">
   			<view class="item" :style="{ textAlign: align,flex:(zItem.$operateList?'1':'1') ,display:'flex'}" v-for="(zItem, zIndex) in title" :key="zIndex" v-if="isSave||!zItem.$operateList">
   				<template v-if="zItem.$operateList">
   					<template v-for="(btn,btnIndex) in zItem.$operateList" >
   					<!-- 	<view :style="{textAlign:(btnIndex!=0?'left':'right'),padding:(btnIndex!=0?'0  0 0 6rpx':'0  6rpx 0 0')}" style="display: inline-block;font-size: 45upx;flex:1" @click="pullEvent(btn.event,{row:item,index:index,num:num})" :key="btn.id" >
   						<text :class="[btn.styles?btn.styles:'','cuIcon-'+btn.id]" class="lg" ></text>
   						</view> -->
   						<button :class="[btn.styles?btn.styles:'']" class="cu-btn round sm" :style="{marginLeft:(btnIndex!=0?'5upx':'')}"
   						 @click="pullEvent(btn.event,{row:item,index:index})"  :key="btn.id">{{btn.label}}</button>
   					</template>
   				</template>
   				<template v-if="!zItem.$operateList"><view :style="{flex:1}">{{ item[zItem.value] || '-' }}</view> </template>
   			</view>
   		</view>
   	</view>
   
   </view>
</template>

<script>
export default {
   data() {
   	return {
   	};
   },
   props: {
   	tableData: {
   		type: Array,
   		required: true
   	},
   	title: {
   		type: Array,
   		required: true
   	},
   	align:{
   		type:String,
   		default:'center'
   	},
   	titleBg:{
   		type:String,
   		default:'#fff'
   	},
   	isSave:{
   		type:Boolean,
   		default:true
   	}
   },
   methods: {
   	//事件触发
   	pullEvent(event, data) {
   		this.$emit(event, data);
   	},
   },
};
</script>

<style lang="scss">
$color: #e0e0e0;
.content {
   display: flex;
   flex: 1;
   flex-direction: column;
   // background-color: #fbf9fe;
}

.flex-box {
   display: flex;
   flex-wrap: wrap;
   justify-content: center ;
   &:last-child {
   	border-bottom: 1upx solid $color;
   }
}

.flex-box > .item {
   flex: 1;
}


.title {
   margin: 20upx 0;
   // color: red;
}
.genaral-area {
   .item {
   	// font-size: 26upx;
   	border: 1upx solid $color;
   	border-width: 1upx 1upx 0 0;
   	padding: 16upx 0;
   	line-height: 48upx;
   	box-sizing: border-box;
   	text-align: center;
   	&:first-child {
   		border-left-width: 1upx;
   	}
   }

   .thead {
   	.item {
   		font-weight: bold;
   		box-sizing: border-box;
   		background-color: #eef1f6;
   	}
   }

   .table {
   	&:last-child {
   		border-bottom: 1upx solid $color;
   	}
   }
}
</style>

用法

<view class="cu-form-group margin-tb-sm">
   		<m-table  @upd="upd" @del="del" :isSave='isSave' :tableData="table" :title="columns" align="center" titleBg="#eee"/>
   	</view>

columns: [
   		                {
   		                    label: '姓名',
   		                    value: 'name'
   		                },
   		                {
   		                    label: '性别',
   		                    value: 'sex'
   		                },
   		                {
   		                    label: '年龄',
   		                    value: 'age'
   		                },
   		                {
   		                	label: "操作",
   		                	$operateList: [
   								{
   										label: "删除",
   										event: "del",
   										id: "delete",
   										styles: 'bg-red'
   								},
   		                		{
   		                			label: "编辑",
   		                			event: "upd",
   		                			id: "edit",
   									styles: 'bg-blue'
   		                		}
   		                	]
   		                }
   		            ],
   		            table: [
   						{
   							name:"张三",
   							sex:"男",
   							age:"16"
   						}
   		            ],

==固定头，固定最左边一列 ==

<template>
	<view class="content">
		<view class="genaral-area">
			<view class="flex-box tc thead" :class="fixed=='top'?'theadSticky':''">
				<view :class="item.$fixed=='left'?'theadStickyleft':''" :style="{ textAlign: align, backgroundColor: titleBg,flex:(item.$operateList?'1':'1') }" class="item" v-for="(item, index) in title" :key="index" v-if="isSave||!item.$operateList">
					<text>{{ item.label }}</text>
				</view>
			</view>
			<view class="flex-box tc" v-for="(item, index) in tableData" :key="index">
				<view :class="zItem.$fixed=='left'?'theadStickyleft':''" class="item" :style="{ textAlign: align,flex:(zItem.$operateList?'1':'1') ,display:'flex'}" v-for="(zItem, zIndex) in title" :key="zIndex" v-if="isSave||!zItem.$operateList">
					<template v-if="zItem.$operateList">
						<template v-for="(btn,btnIndex) in zItem.$operateList" >
						<!-- 	<view :style="{textAlign:(btnIndex!=0?'left':'right'),padding:(btnIndex!=0?'0  0 0 6rpx':'0  6rpx 0 0')}" style="display: inline-block;font-size: 45upx;flex:1" @click="pullEvent(btn.event,{row:item,index:index,num:num})" :key="btn.id" >
							<text :class="[btn.styles?btn.styles:'','cuIcon-'+btn.id]" class="lg" ></text>
							</view> -->
							<button :class="[btn.styles?btn.styles:'']" class="cu-btn round sm" :style="{marginLeft:(btnIndex!=0?'5upx':'')}"
							 @click="pullEvent(btn.event,{row:item,index:index})"  :key="btn.id">{{btn.label}}</button>
						</template>
					</template>
					<template v-if="!zItem.$operateList"><view :style="{flex:1}">{{ item[zItem.value] || '-' }}</view> </template>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
export default {
	data() {
		return {
		};
	},
	props: {
		tableData: {
			type: Array,
			required: true
		},
		title: {
			type: Array,
			required: true
		},
		align:{
			type:String,
			default:'center'
		},
		titleBg:{
			type:String,
			default:'#fff'
		},
		isSave:{
			type:Boolean,
			default:true
		}
	},
	methods: {
		//事件触发
		pullEvent(event, data) {
			this.$emit(event, data);
		},
	},
};
</script>

<style lang="scss">
$color: #e0e0e0;
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	// background-color: #fbf9fe;
}

.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center ;
	&:last-child {
		border-bottom: 1upx solid $color;
	}
}

.flex-box > .item {
	flex: 1;
}


.title {
	margin: 20upx 0;
	// color: red;
}
.genaral-area {
	.item {
		// font-size: 26upx;
		border: 1upx solid $color;
		border-width: 1upx 1upx 0 0;
		padding: 16upx 0;
		line-height: 48upx;
		box-sizing: border-box;
		text-align: center;
		&:first-child {
			border-left-width: 1upx;
		}
	}

	.thead {
		.item {
			font-weight: bold;
			box-sizing: border-box;
			background-color: #eef1f6;
		}
	}

	.table {
		&:last-child {
			border-bottom: 1upx solid $color;
		}
	}
}
// 添加的
.theadSticky{
  position:sticky;
  top:0px;
  z-index: 1;
}
.theadStickyleft{
  position:sticky;
  left:0px;
  background-color: #fff;
}
</style>

用法

<template>
	<view style="height: 100%;">
			<view class="ul">
				<my-custom bgColor="bg-white" isBack="true">
					<block slot="backText"></block>
					<block slot="content">
						项目
					</block>
				</my-custom>
				<view class="bg-white" style="width: 100%;height: 70upx;line-height: 50upx;text-align: center;">项目简介</view>
				<view class="bg-white" style="width: 100%;overflow: auto;">
					<view style="width: 1100rpx;background-color: rad;"><m-table :tableData="table" :title="columns" align="center" titleBg="#eee" fixed="top"></m-table></view>
				</view>
			</view>
	</view>
</template>

<script>
import mTable from '../../../components/table.vue';
export default {
	components: {
		mTable
	},
	data() {
		return {
			columns: [
				{
					label: '姓名',
					value: 'name',
					$fixed: 'left'
				},
				{
					label: '性别',
					value: 1
				},
				{
					label: '年龄',
					value: 2
				},
				{
					label: '其他',
					value: 3
				},
			],
			table: [
				
			]
		};
	},
	onLoad(option) {
		for (var i = 0; i < 80; i++) {
			this.table.push({
						name:"张三",
						1:"女",
						2:"18",
						3:"无"
					})
		}
	},
	methods: {}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.ul {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
</style>