Merge branch 'master' of http://192.168.1.43:3000/v3/v3-lab-xcx

pages/views/dataBoard/daYiReservation.vue

@@ -53,57 +53,22 @@
 		</view>
 		<!--  -->
 		<view class="table">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>排行</view>
-						<view>设备名称</view>
-						<view>使用机时</view>
-						<view>预约费用</view>
-						<view>测试样品</view>
-					</view>
-				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text
-								:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data3}}</view>
-						<view>{{item.data4}}</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-			</view>
-
+			</uni-card>
 		</view>
 		<!--  -->
 		<view class="small-title">
 			<view class="small-title-l">一年内空闲率排行TOP10</view>
 		</view>
 		<view class="table-tow">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>排行</view>
-						<view>设备名称</view>
-						<view>预约时长</view>
-						<view>空闲率</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column2" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text
-								:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data3}}</view>
-					</view>
-				</view>
-			</view>
+			</uni-card>
 
 		</view>
 		<view class="small-title">
@@ -145,7 +110,7 @@
 					legend: {
 						show: true,
 						position: "right",
-						fontColor:'#fff',
+						fontColor: '#fff',
 					},
 					title: {
 						name: "",
@@ -189,7 +154,7 @@
 							max: 200,
 							labelShow: true,
 							border: true,
-							labelColor:'#fff',
+							labelColor: '#fff',
 						}
 					}
 				},
@@ -203,6 +168,61 @@
 					page: 1,
 					pageSize: 10,
 				},
+				column: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '设备名称',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data2',
+						label: '使用机时',
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '预约费用',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '测试样品',
+						align: 'center',
+					},
+				],
+				column2: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '设备名称',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data2',
+						label: '预约时长',
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '空闲率',
+						align: 'center',
+					},
+				],
 				dataList: [{
 						data1: '压力容器',
 						data2: '499',
@@ -512,89 +532,12 @@
 		}
 
 		.table {
-			width: 720rpx;
+			width: 690rpx;
 			margin-top: 20rpx;
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 			margin-left: 30rpx;
 
-			.table-border {
-				overflow: auto;
-
-				.table-th {
-					width: 860rpx;
-					height: 80rpx;
-					background: rgba(162, 162, 162, 0.2);
-					border-radius: 20rpx 20rpx 0rpx 0rpx;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-th-li {
-						height: 80rpx;
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 30rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-
-						>view:nth-of-type(1) {
-							width: 80rpx;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-					}
-				}
-
-				.table-tb {
-					width: 860rpx;
-					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-					background: #3E414F;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-tb-li {
-						height: 80rpx;
-						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-
-						}
-
-						>view:nth-of-type(1) {
-							width: 80rpx;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-
-					}
-				}
-
-
-			}
 		}
 
 		.sortOne {
@@ -660,86 +603,9 @@
 		.table-tow {
 			width: 690rpx;
 			margin-top: 20rpx;
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 			margin-left: 30rpx;
-
-			.table-border {
-				overflow: auto;
-
-				.table-th {
-					width: 690rpx;
-					height: 80rpx;
-					background: rgba(162, 162, 162, 0.2);
-					border-radius: 20rpx 20rpx 0rpx 0rpx;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-th-li {
-						height: 80rpx;
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 30rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-
-						>view:nth-of-type(1) {
-							width: 80rpx;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-					}
-				}
-
-				.table-tb {
-					width: 690rpx;
-					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-					background: #3E414F;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-tb-li {
-						height: 80rpx;
-						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-
-						}
-
-						>view:nth-of-type(1) {
-							width: 80rpx;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-
-					}
-				}
-
-			}
 		}
 
 		.small-title-tow {

pages/views/dataBoard/hazardSources.vue

@@ -33,25 +33,11 @@
 			</view>
 		</view>
 		<view class="table">
-			<view class="table-border">
-				<view class="table-th">
-					<view>排行</view>
-					<view>学院单位</view>
-					<view>总数</view>
-					<view>危化品数</view>
-					<view>冷热设备数</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column"  :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-				<view class="table-tb" v-for="(item,index) in dataList" :key="index">
-					<view>
-						<text
-							:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-					</view>
-					<view>{{item.data1}}</view>
-					<view>{{item.data2}}</view>
-					<view>{{item.data3}}</view>
-					<view>{{item.data4}}</view>
-				</view>
-			</view>
+			</uni-card>
 
 		</view>
 	</view>
@@ -105,6 +91,36 @@
 					page: 1,
 					pageSize: 10,
 				},
+				column: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '学院单位',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '总数',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '危化品数',
+						align: 'center',
+					},
+					{
+						name: 'data5',
+						label: '冷热设备数',
+						align: 'center',
+					},
+				],
 				dataList: [{
 						data1: '植物保护',
 						data2: '499',
@@ -157,6 +173,7 @@
 			dateClick(index) {
 				this.dateIndex = index;
 			},
+			
 			getServerData() {
 				//模拟从服务器获取数据时的延时
 				setTimeout(() => {
@@ -187,7 +204,7 @@
 		height: 100%;
 		width: 100%;
 		background: #363744;
-		padding: 20rpx 30rpx 0;
+		padding: 20rpx 30rpx 36rpx;
 		box-sizing: border-box;
 
 		.small-title {
@@ -301,91 +318,10 @@
 		}
 
 		.table {
-			width: 720rpx;
+			width: 690rpx;
 			margin-top: 20rpx;
-
-			.table-border {
-				overflow: auto;
-
-			}
-
-			.table-th {
-				width: 860rpx;
-				height: 80rpx;
-				background: rgba(162, 162, 162, 0.2);
-				border-radius: 20rpx 20rpx 0rpx 0rpx;
-				display: flex;
-				justify-content: flex-start;
-				padding: 0 30rpx;
-				box-sizing: border-box;
-
-				>view {
-					font-weight: 400;
-					font-size: 30rpx;
-					color: #FFFFFF;
-					line-height: 80rpx;
-					text-align: center;
-					margin-right: 38rpx;
-					width: 120rpx;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-
-				>view:nth-of-type(1) {
-					width: 64rpx;
-				}
-
-				>view:nth-of-type(2) {
-					width: 168rpx;
-				}
-
-				>view:last-child {
-					margin-right: 0;
-					width: 168rpx;
-				}
-			}
-
-
-			.table-tb {
-				width: 860rpx;
-				height: 80rpx;
-				border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				background: #3E414F;
-				padding: 0 30rpx;
-				box-sizing: border-box;
-
-				>view {
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FFFFFF;
-					line-height: 80rpx;
-					text-align: center;
-					margin-right: 38rpx;
-					width: 120rpx;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-
-				}
-
-				>view:nth-of-type(1) {
-					width: 64rpx;
-
-				}
-
-				>view:nth-of-type(2) {
-					width: 168rpx;
-				}
-
-				>view:last-child {
-					margin-right: 0;
-					width: 168rpx;
-				}
-			}
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 
 			.sortOne {
 				display: inline-block;

pages/views/dataBoard/hazardousChemicals.vue

@@ -43,29 +43,11 @@
 			</view>
 		</view>
 		<view class="table">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>排行</view>
-						<view>学院单位</view>
-						<view>总数</view>
-						<view>总量</view>
-						<view>今日新增</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text :class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data3}}</view>
-						<view>{{item.data4}}</view>
-					</view>
-				</view>
-			</view>
-
+			</uni-card>
 		</view>
 	</view>
 </template>
@@ -85,17 +67,22 @@
 		data() {
 			return {
 				opts: {
-					color: ['#FF0000','#D40000','#FF5900','#FF9900','#FF9900'],
-					legend:{
-						show:false,
+					color: ['#FF0000', '#D40000', '#FF5900', '#FF9900', '#FF9900'],
+					legend: {
+						show: false,
 					},
 					padding: [15, 85, 6, 5],
 					enableScroll: false,
 					extra: {
 						funnel: {
-							type: 'triangle',
+							activeOpacity: 0.3,
+							activeWidth: 10,
 							border: false,
+							borderWidth: 2,
+							borderColor: "#FFFFFF",
+							fillOpacity: 1,
 							labelAlign: "right",
+							type: "pyramid"
 						}
 					}
 				},
@@ -105,6 +92,36 @@
 					page: 1,
 					pageSize: 10,
 				},
+				column: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '学院单位',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '总数',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '总量',
+						align: 'center',
+					},
+					{
+						name: 'data5',
+						label: '今日新增',
+						align: 'center',
+					},
+				],
 				dataList: [{
 						data1: '植物保护',
 						data2: '499',
@@ -166,28 +183,28 @@
 							data: [{
 								"name": "植物保护",
 								"value": 50,
-								"labelText":"总量88.88kg",
-								"textColor":"#fff",
+								"labelText": "总量88.88kg",
+								"textColor": "#fff",
 							}, {
 								"name": "园林艺术",
 								"value": 30,
-								"labelText":"总量88.88kg",
-								"textColor":"#fff",
+								"labelText": "总量88.88kg",
+								"textColor": "#fff",
 							}, {
 								"name": "生命科学",
 								"value": 20,
-								"labelText":"总量88.88kg",
-								"textColor":"#fff",
+								"labelText": "总量88.88kg",
+								"textColor": "#fff",
 							}, {
 								"name": "理学院",
 								"value": 18,
-								"labelText":"总量88.88kg",
-								"textColor":"#fff",
+								"labelText": "总量88.88kg",
+								"textColor": "#fff",
 							}, {
 								"name": "农学院",
 								"value": 8,
-								"labelText":"总量88.88kg",
-								"textColor":"#fff",
+								"labelText": "总量88.88kg",
+								"textColor": "#fff",
 							}]
 						}]
 					};
@@ -203,7 +220,7 @@
 		height: 100%;
 		width: 100%;
 		background: #363744;
-		padding: 20rpx 30rpx 0;
+		padding: 20rpx 30rpx 36rpx;
 		box-sizing: border-box;
 
 		.small-title {
@@ -301,19 +318,23 @@
 					height: 28rpx;
 				}
 			}
-			.chartOne{
+
+			.chartOne {
 				background: rgba(255, 0, 0, 0.2);
 				color: #FF0000;
 			}
-			.chartTow{
+
+			.chartTow {
 				background: #FFE3CC;
 				color: #FF9900;
 			}
-			.chartThree{
+
+			.chartThree {
 				background: #FFEECC;
 				color: #FFAA00;
 			}
-			.chartFive{
+
+			.chartFive {
 				background: #CCE6FE;
 				color: #0183FA;
 			}
@@ -396,158 +417,10 @@
 		}
 
 		.table {
-			width: 720rpx;
+			width: 690rpx;
 			margin-top: 20rpx;
-
-			.table-border {
-				overflow: auto;
-			}
-
-			.table-th {
-				width: 860rpx;
-				height: 80rpx;
-				background: rgba(162, 162, 162, 0.2);
-				border-radius: 20rpx 20rpx 0rpx 0rpx;
-				padding: 0 30rpx;
-				box-sizing: border-box;
-
-				.table-th-li {
-					height: 80rpx;
-					display: flex;
-					justify-content: flex-start;
-
-					>view {
-						font-weight: 400;
-						font-size: 30rpx;
-						color: #FFFFFF;
-						line-height: 80rpx;
-						text-align: center;
-						margin-right: 38rpx;
-						width: 120rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-
-					>view:nth-of-type(1) {
-						width: 64rpx;
-					}
-
-					>view:nth-of-type(2) {
-						width: 168rpx;
-					}
-
-					>view:last-child {
-						margin-right: 0;
-						width: 168rpx;
-					}
-
-				}
-			}
-
-
-			.table-tb {
-				width: 860rpx;
-				border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-				background: #3E414F;
-				padding: 0 30rpx;
-				box-sizing: border-box;
-
-				.table-tb-li {
-					height: 80rpx;
-					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-					display: flex;
-					justify-content: flex-start;
-
-					>view {
-						font-weight: 400;
-						font-size: 28rpx;
-						color: #FFFFFF;
-						line-height: 80rpx;
-						text-align: center;
-						margin-right: 38rpx;
-						width: 120rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-
-					}
-
-					>view:nth-of-type(1) {
-						width: 64rpx;
-					}
-
-					>view:nth-of-type(2) {
-						width: 168rpx;
-					}
-
-					>view:last-child {
-						margin-right: 0;
-						width: 168rpx;
-					}
-				}
-				.sortOne {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(255, 0, 0, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FF0000;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-				
-				.sortTow {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(255, 153, 0, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FF9900;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-				
-				.sortThree {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(255, 242, 0, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FFF200;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-				
-				.sortFive {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(1, 131, 250, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #0183FA;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-
-
-			}
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 		}
 	}
 </style>

pages/views/dataBoard/labPage.vue

@@ -36,27 +36,11 @@
 			</view>
 		</view>
 		<view class="table">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>学院单位</view>
-						<view>实验人数</view>
-						<view>值日人数</view>
-						<view>检查次数</view>
-						<view>超期设备</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data3}}</view>
-						<view>{{item.data4}}</view>
-						<view>{{item.data5}}</view>
-					</view>
-				</view>
-			</view>
-
+			</uni-card>
 		</view>
 	</view>
 </template>
@@ -105,6 +89,8 @@
 					},
 				],
 				dateIndex: 0,
+
+
 				// 查询参数
 				queryParams: {
 					page: 1,
@@ -118,7 +104,7 @@
 					dataPointShape: false,
 					legend: {
 						show: false,
-						fontColor:'#fff',
+						fontColor: '#fff',
 					},
 					extra: {
 						tooltip: {
@@ -139,6 +125,36 @@
 					},
 				},
 				chartData: {},
+				column: [{
+						name: 'data1',
+						label: '学院单位',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data2',
+						label: '实验人数',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '值班人数',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '检查次数',
+						align: 'center',
+					},
+					{
+						name: 'data5',
+						label: '超期设备',
+						align: 'center',
+					},
+				],
 				dataList: [{
 						data1: '植物保护',
 						data2: '499',
@@ -179,7 +195,8 @@
 			}
 		},
 		created() {
-
+			this.dateIndex = new Date().getDay() - 1;
+			console.log(this.dateIndex)
 		},
 		beforeMount() {
 
@@ -188,8 +205,9 @@
 			this.getServerData();
 		},
 		methods: {
+
 			dateClick(index) {
-				this.dateIndex = index;
+				//this.dateIndex = index;
 			},
 			getServerData() {
 				//模拟从服务器获取数据时的延时
@@ -221,13 +239,12 @@
 		},
 	}
 </script>
-
 <style lang="stylus" scoped>
 	.labPage {
 		height: 100%;
 		width: 100%;
 		background: #363744;
-		padding: 20rpx 30rpx 0;
+		padding: 20rpx 30rpx 36rpx;
 		box-sizing: border-box;
 
 		.chart {
@@ -375,81 +392,10 @@
 		}
 
 		.table {
-			width: 720rpx;
+			width: 690rpx;
 			margin-top: 20rpx;
-
-			.table-border {
-				overflow: auto;
-
-				.table-th {
-					width: 860rpx;
-					height: 80rpx;
-					background: rgba(162, 162, 162, 0.2);
-					border-radius: 20rpx 20rpx 0rpx 0rpx;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-th-li {
-						height: 80rpx;
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 30rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-
-						>view:nth-of-type(1) {
-							width: 168rpx;
-						}
-					}
-				}
-
-				.table-tb {
-					width: 860rpx;
-					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-					background: #3E414F;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-tb-li {
-						height: 80rpx;
-						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-
-						}
-
-						>view:nth-of-type(1) {
-							width: 168rpx;
-						}
-
-					}
-				}
-
-			}
-
-
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 		}
 	}
 </style>

pages/views/dataBoard/securityHidden.vue

@@ -51,91 +51,27 @@
 		</scroll-view>
 		<!--安全隐患排行 -->
 		<view class="table" v-if="chartIndex==0">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>排行</view>
-						<view>学院单位</view>
-						<view>总隐患</view>
-						<view>已整改</view>
-						<view>未整改</view>
-						<view>暂无法整改</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text
-								:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-					</view>
-
-				</view>
-			</view>
+			</uni-card>
 		</view>
 		<!-- 一级指标排行 -->
 		<view class="table-tow" v-if="chartIndex!=0 && curTabTow==0">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>序号</view>
-						<view>一级指标</view>
-						<view>隐患数</view>
-						<view>占比</view>
-					</view>
-				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text
-								:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column2" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-			</view>
+			</uni-card>
 		</view>
 		<!--学院单位 -->
 		<view class="table-three" v-if="chartIndex!=0 && curTabTow==1">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>排行</view>
-						<view>学院单位</view>
-						<view>总隐患</view>
-						<view>实验场所</view>
-						<view>安全设施</view>
-						<view>化学安全</view>
-						<view>基础安全</view>
-						<view>生物安全</view>
-						<view>特种与冷热设备</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column3" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text
-								:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data1}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-					</view>
-
-				</view>
-			</view>
+			</uni-card>
 		</view>
 	</view>
 </template>
@@ -204,7 +140,7 @@
 							max: 200,
 							labelShow: true,
 							border: true,
-							labelColor:'#fff',
+							labelColor: '#fff',
 						}
 					}
 				},
@@ -215,12 +151,129 @@
 					page: 1,
 					pageSize: 10,
 				},
+				column: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '学院单位',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '总隐患',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '已整改',
+						align: 'center',
+					},
+					{
+						name: 'data5',
+						label: '未整改',
+						align: 'center',
+					},
+					{
+						name: 'data6',
+						label: '暂无法整改',
+						align: 'center',
+					},
+
+				],
+				column2: [{
+						type: 'index',
+						label: '序号',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '一级指标',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '隐患数',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '占比',
+						align: 'center',
+					},
+
+				],
+				column3: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '学院单位',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '总隐患',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '实验场所',
+						align: 'center',
+					},
+					{
+						name: 'data5',
+						label: '安全设施',
+						align: 'center',
+					},
+					{
+						name: 'data6',
+						label: '化学安全',
+						align: 'center',
+					},
+					{
+						name: 'data7',
+						label: '基础安全',
+						align: 'center',
+					},
+					{
+						name: 'data8',
+						label: '生物安全',
+						align: 'center',
+					},
+					{
+						name: 'data9',
+						label: '特种与冷热设备',
+						align: 'center',
+					},
+
+				],
 				dataList: [{
 						data1: '植物保护',
 						data2: '499',
 						data3: '47',
 						data4: '220',
 						data5: '137',
+						data6: '137',
+						data7: '137',
+						data8: '137',
+						data9: '137',
 					},
 					{
 						data1: '资源环境',
@@ -228,6 +281,10 @@
 						data3: '7',
 						data4: '120',
 						data5: '37',
+						data6: '137',
+						data7: '137',
+						data8: '137',
+						data9: '137',
 					},
 					{
 						data1: '生命科学',
@@ -235,6 +292,10 @@
 						data3: '71',
 						data4: '10',
 						data5: '37',
+						data6: '137',
+						data7: '137',
+						data8: '137',
+						data9: '137',
 					},
 					{
 						data1: '资源环境',
@@ -242,6 +303,10 @@
 						data3: '7',
 						data4: '120',
 						data5: '37',
+						data6: '137',
+						data7: '137',
+						data8: '137',
+						data9: '137',
 					},
 					{
 						data1: '生命科学',
@@ -249,6 +314,10 @@
 						data3: '71',
 						data4: '10',
 						data5: '37',
+						data6: '137',
+						data7: '137',
+						data8: '137',
+						data9: '137',
 					},
 				],
 				total: 0,
@@ -520,104 +589,11 @@
 		}
 
 		.table {
-			width: 720rpx;
-			margin: 20rpx 0 0 30rpx;
-
-			.table-border {
-				width: auto;
-				overflow: auto;
-
-				.table-th {
-					width: 860rpx;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-					background: rgba(162, 162, 162, 0.2);
-					border-radius: 20rpx 20rpx 0rpx 0rpx;
-
-					.table-th-li {
-						height: 80rpx;
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 30rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-
-						>view:nth-of-type(1) {
-							width: 116rpx;
-							text-align: left;
-							margin-right: 0;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-
-						>view:last-child {
-							margin-right: 0;
-							width: 228rpx;
-						}
-					}
-
-				}
-
-
-				.table-tb {
-					width: 860rpx;
-					background: #3E414F;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-tb-li {
-						height: 80rpx;
-						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-
-						}
-
-						>view:nth-of-type(1) {
-							width: 116rpx;
-							text-align: left;
-							margin-right: 0;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-
-						>view:last-child {
-							margin-right: 0;
-							width: 228rpx;
-						}
-					}
-
-
-
-				}
-			}
-
+			width: 690rpx;
+			margin-top: 20rpx;
+			margin-left: 30rpx;
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 
 		}
 

pages/views/dataBoard/warningDispose.vue

@@ -12,11 +12,10 @@
 					</view>
 				</view>
 				<view class="chart-b">
-					<view class="chart-b-li" 
-					v-for="(item,index) in deptList" :key="index"
-					:style="'top:'+item.top+'rpx;left:'+item.left+'rpx;'"> 
+					<view class="chart-b-li" v-for="(item,index) in deptList" :key="index"
+						:style="'top:'+item.top+'rpx;left:'+item.left+'rpx;'">
 						<view>{{item.name}}</view>
-						<img  src="@/pages/images/dataBoard/img_xyzc_bg.png">
+						<img src="@/pages/images/dataBoard/img_xyzc_bg.png">
 					</view>
 				</view>
 			</view>
@@ -43,31 +42,11 @@
 			</view>
 		</view>
 		<view class="table">
-			<view class="table-border">
-				<view class="table-th">
-					<view class="table-th-li">
-						<view>排行</view>
-						<view>学院单位</view>
-						<view>总数</view>
-						<view>昨日</view>
-						<view>今日</view>
-						<view>环比</view>
-					</view>
-				</view>
-				<view class="table-tb">
-					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>
-							<text :class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
-						</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-					</view>
+			<uni-card>
+				<view style="height: 200px">
+					<zb-table :columns="column" :stripe="false" :border="false" :data="dataList"></zb-table>
 				</view>
-			</view>
-
+			</uni-card>
 		</view>
 	</view>
 </template>
@@ -116,61 +95,95 @@
 					},
 				],
 				dateIndex: 0,
-				deptList:[
-				          {
-				            name:"农学院",
-				            value:"0",
-				            top:18,
-				            left:46,
-				          },
-				          {
-				            name:"理学院",
-				            value:"0",
-				            top:18,
-				            left:508,
-				          },
-				          {
-				            name:"化学与药物",
-				            value:"0",
-				            top:100,
-				            left:136,
-				          },
-				          {
-				            name:"生命科学",
-				            value:"0",
-				            top:85,
-				            left:370,
-				          },
-				          {
-				            name:"园林艺术",
-				            value:"0",
-				            top:146,
-				            left:546,
-				          },
-				          {
-				            name:"植物保护",
-				            value:"0",
-				            top:271,
-				            left:533,
-				          },
-				          {
-				            name:"资源环境",
-				            value:"0",
-				            top:208,
-				            left:42,
-				          },
-				          {
-				            name:"国重楼",
-				            value:"0",
-				            top:200,
-				            left:333,
-				          },
-				        ],
+				deptList: [{
+						name: "农学院",
+						value: "0",
+						top: 18,
+						left: 46,
+					},
+					{
+						name: "理学院",
+						value: "0",
+						top: 18,
+						left: 508,
+					},
+					{
+						name: "化学与药物",
+						value: "0",
+						top: 100,
+						left: 136,
+					},
+					{
+						name: "生命科学",
+						value: "0",
+				  top: 85,
+						left: 370,
+					},
+					{
+						name: "园林艺术",
+						value: "0",
+						top: 146,
+						left: 546,
+					},
+					{
+						name: "植物保护",
+						value: "0",
+						top: 271,
+						left: 533,
+					},
+					{
+						name: "资源环境",
+						value: "0",
+						top: 208,
+						left: 42,
+					},
+					{
+				  name: "国重楼",
+						value: "0",
+						top: 200,
+						left: 333,
+					},
+				],
 				// 查询参数
 				queryParams: {
 					page: 1,
 					pageSize: 10,
 				},
+				column: [{
+						type: 'index',
+						label: '排行',
+						fixed: true,
+						width: 60,
+						align: 'center',
+					},
+					{
+						name: 'data1',
+						label: '学院单位',
+						fixed: true,
+						width: 80,
+						align: 'center',
+					},
+					{
+						name: 'data3',
+						label: '总数',
+						align: 'center',
+					},
+					{
+						name: 'data4',
+						label: '昨日',
+						align: 'center',
+					},
+					{
+						name: 'data5',
+						label: '今日',
+						align: 'center',
+					},
+					{
+						name: 'data6',
+						label: '环比',
+						align: 'center',
+					},
+				],
 				dataList: [{
 						data1: '植物保护',
 						data2: '499',
@@ -230,7 +243,7 @@
 		height: 100%;
 		width: 100%;
 		background: #363744;
-		padding: 20rpx 0rpx 0;
+		padding: 20rpx 0rpx 36rpx;
 		box-sizing: border-box;
 
 		.chart {
@@ -245,15 +258,18 @@
 				position: absolute;
 				z-index: 100;
 			}
-			.chart-n{
+
+			.chart-n {
 				padding: 34rpx 0rpx 26rpx;
 				box-sizing: border-box;
 				position: absolute;
 				z-index: 200;
+
 				.chart-t {
 					display: flex;
 					justify-content: space-between;
 					margin: 0 30rpx;
+
 					.chart-t-li {
 						width: 76rpx;
 						height: 100rpx;
@@ -280,6 +296,7 @@
 					.color-A {
 						background: #0183FA;
 						border-radius: 10rpx 10rpx 10rpx 10rpx;
+
 						.chart-t-li-t {
 							color: #FFFFFF;
 						}
@@ -291,6 +308,7 @@
 
 					.color-B {
 						background: none;
+
 						.chart-t-li-t {
 							color: #FFFFFF;
 						}
@@ -305,19 +323,21 @@
 					width: 690rpx;
 					height: 350rpx;
 					position: absolute;
-					.chart-b-li{
+
+					.chart-b-li {
 						position: absolute;
 						z-index: 300;
 						width: 200rpx;
 						height: 46rpx;
-						
-						>img{
+
+						>img {
 							width: 200rpx;
 							height: 46rpx;
 							position: absolute;
 							z-index: 400;
 						}
-						>view{
+
+						>view {
 							padding-left: 16rpx;
 							box-sizing: border-box;
 							width: 200rpx;
@@ -330,7 +350,7 @@
 							line-height: 46rpx;
 							text-align: left;
 						}
-						
+
 					}
 				}
 			}
@@ -406,149 +426,11 @@
 		}
 
 		.table {
-			width: 720rpx;
+			width: 690rpx;
 			margin-top: 20rpx;
+			border-radius: 20rpx 20rpx 0 0;
+			overflow: hidden;
 			margin-left: 30rpx;
-
-			.table-border {
-				overflow: auto;
-
-				.table-th {
-					width: 860rpx;
-					height: 80rpx;
-					background: rgba(162, 162, 162, 0.2);
-					border-radius: 20rpx 20rpx 0rpx 0rpx;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-th-li {
-						height: 80rpx;
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 30rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-						}
-
-						>view:nth-of-type(1) {
-							width: 80rpx;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-					}
-				}
-
-				.table-tb {
-					width: 860rpx;
-					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-					background: #3E414F;
-					padding: 0 30rpx;
-					box-sizing: border-box;
-
-					.table-tb-li {
-						height: 80rpx;
-						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
-						display: flex;
-						justify-content: flex-start;
-
-						>view {
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #FFFFFF;
-							line-height: 80rpx;
-							text-align: center;
-							margin-right: 38rpx;
-							width: 120rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-
-						}
-
-						>view:nth-of-type(1) {
-							width: 80rpx;
-						}
-
-						>view:nth-of-type(2) {
-							width: 168rpx;
-						}
-
-					}
-				}
-
-				.sortOne {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(255, 0, 0, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FF0000;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-				
-				.sortTow {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(255, 153, 0, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FF9900;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-				
-				.sortThree {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(255, 242, 0, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FFF200;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-				
-				.sortFive {
-					display: inline-block;
-					width: 40rpx;
-					height: 40rpx;
-					padding: 4rpx;
-					box-sizing: border-box;
-					background: rgba(1, 131, 250, 0.2);
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #0183FA;
-					line-height: 40rpx;
-					text-align: center;
-					border-radius: 20rpx;
-				}
-			}
-
-
 		}
 	}
 </style>

uni_modules/zb-table/changelog.md

@@ -0,0 +1,106 @@
+## 1.2.18（2023-06-01）
+更新
+## 1.2.16（2023-05-10）
+增加单元格点击事件
+完善文档
+增加示例
+## 1.2.15（2022-08-25）
+优化部分细节
+## 1.2.14（2022-04-25）
+修改vue 3 报错小程序Generated an empty chunk: "uni_modules/zb-table/components/zb-table/js/util"
+## 1.2.13（2022-04-22）
+增加图片宽度设置
+## 1.2.12（2022-04-22）
+修复pc端 滚动条占位问题
+## 1.2.11（2022-04-22）
+增加多图片展示
+## 1.2.10（2022-04-19）
+版本解决冲突
+## 1.2.9（2022-04-19）
+暂时去掉多级表头...有着某些问题，正在修复中
+## 1.1.9（2022-04-19）
+暂时去掉多级表头...有着某些问题，正在修复中
+## 1.1.23（2022-04-19）
+暂时去掉多级表头，有着某些问题，修复中。。。
+## 1.1.22（2022-04-19）
+暂时去掉多级表头，存在某些问题 ，正在修复中
+## 1.1.21（2022-03-29）
+优化数字问题
+## 1.1.20（2022-03-29）
+优化按钮，可以自定义按钮，自定义添加class
+## 1.1.19（2022-03-28）
+进行优化加载
+## 1.1.18（2022-03-28）
+修复pc端滚动条问题
+## 1.1.17（2022-03-25）
+修改 数据回显的时候，全选框没有选中效果
+## 1.1.16（2022-03-25）
+新增：table属性 cell-style 修改单元格样式
+## 1.1.15（2022-03-23）
+fix:支付宝小程序上拉加载e.detail 没有值导致上拉加载失效 ，已修复
+## 1.1.14（2022-03-23）
+fix: 支付宝小程序左右无法滑动的问题
+## 1.1.13（2022-03-21）
+fix：英文宽度自适应问题
+## 1.1.12（2022-03-20）
+修改自适应宽度问题
+## 1.1.11（2022-03-19）
+增加上拉加载功能
+## 1.1.10（2022-03-18）
+修改合计不更新问题
+## 1.1.9（2022-03-16）
+优化css 样式
+## 1.1.8（2022-03-16）
+增加表尾合计行
+## 1.1.7（2022-03-15）
+修改css样式
+## 1.1.6（2022-03-14）
+进行代码优化
+## 1.1.5（2022-03-12）
+更新一个操作按钮的时候 报错问题，进行代码优化
+## 1.1.4（2022-03-12）
+增加图片统一高度
+## 1.1.3（2022-03-12）
+增加图片地址 ，并且图片支持预览功能
+## 1.1.2（2022-03-11）
+新增默认 是否选中功能，进行优化
+## 1.1.1（2022-03-10）
+新增单击事件
+## 1.1.0（2022-03-10）
+- 增加单击事件
+
+## 1.1.0（2022-03-10）
+- 增加checkbox功能 ，进行优化
+
+## 1.0.11（2022-03-09）
+- 修改小程序中排序问题
+
+## 1.0.10（2022-03-09）
+- 做了兼容性处理
+
+## 1.0.8（2022-03-09）
+- 进行优化滚动防止 多次计算
+
+## 1.0.7（2022-03-09）
+- 修改一些问题 新增过滤器
+
+## 1.0.6（2022-03-08）
+- 修改样式 按钮自适应宽度
+
+## 1.0.5（2022-03-08）
+- 新增按钮 修改问题
+
+## 1.0.4（2022-03-04）
+- 增加空占位符"--"
+
+## 1.0.3（2022-03-02）
+- 新增表格斑马纹配置、列宽配置、表头显示配置
+
+## 1.0.2（2022-03-02）
+- 新增排序功能，优化样式
+
+## 1.0.1（2022-03-01）
+- 可以传入动态数据，可以对左边列表进行是否固定首列
+
+## 1.0.0（2022-03-01）
+- 初始化

uni_modules/zb-table/components/zb-table/components/table-checkbox.vue

@@ -0,0 +1,180 @@
+<template>
+	<view class="uni-table-checkbox" @click.stop="selected">
+		<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
+			<view class="checkbox__inner-icon"></view>
+		</view>
+		<view v-else class="checkbox__inner checkbox--indeterminate">
+			<view class="checkbox__inner-icon"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'TableCheckbox',
+		emits:['checkboxSelected'],
+		props: {
+			indeterminate: {
+				type: Boolean,
+				default: false
+			},
+			checked: {
+				type: [Boolean,String],
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: Number,
+				default: -1
+			},
+			cellData: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		watch:{
+			checked(newVal){
+				if(typeof this.checked === 'boolean'){
+					this.isChecked = newVal
+				}else{
+					this.isChecked = true
+				}
+			},
+			indeterminate(newVal){
+				this.isIndeterminate = newVal
+			}
+		},
+		data() {
+			return {
+				isChecked: false,
+				isDisabled: false,
+				isIndeterminate:false
+			}
+		},
+		created() {
+			if(typeof this.checked === 'boolean'){
+				this.isChecked = this.checked
+			}
+			this.isDisabled = this.disabled
+		},
+		methods: {
+			selected() {
+				if (this.isDisabled) return
+				this.isIndeterminate = false
+				this.isChecked = !this.isChecked
+        console.log('===',this.indeterminate,this.isChecked)
+				this.$emit('checkboxSelected', {
+					checked: this.isChecked,
+					data: this.cellData
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$checked-color: #007aff;
+	$border-color: #DCDFE6;
+	$disable:0.4;
+
+	.uni-table-checkbox {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		margin: 5px 0;
+		cursor: pointer;
+
+		// 多选样式
+		.checkbox__inner {
+			/* #ifndef APP-NVUE */
+			flex-shrink: 0;
+			box-sizing: border-box;
+			/* #endif */
+			position: relative;
+			width: 16px;
+			height: 16px;
+			border: 1px solid $border-color;
+			border-radius: 2px;
+			background-color: #fff;
+			z-index: 1;
+
+			.checkbox__inner-icon {
+				position: absolute;
+				/* #ifdef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				/* #ifndef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				left: 5px;
+				height: 7px;
+				width: 3px;
+				border: 1px solid #fff;
+				border-left: 0;
+				border-top: 0;
+				opacity: 0;
+				transform-origin: center;
+				transform: rotate(45deg);
+				box-sizing: content-box;
+			}
+
+			&.checkbox--indeterminate {
+				border-color: $checked-color;
+				background-color: $checked-color;
+
+				.checkbox__inner-icon {
+					position: absolute;
+					opacity: 1;
+					transform: rotate(0deg);
+					height: 2px;
+					top: 0;
+					bottom: 0;
+					margin: auto;
+					left: 0px;
+					right: 0px;
+					bottom: 0;
+					width: auto;
+					border: none;
+					border-radius: 2px;
+					transform: scale(0.5);
+					background-color: #fff;
+				}
+			}
+			&:hover{
+				border-color: $checked-color;
+			}
+			// 禁用
+			&.is-disable {
+				/* #ifdef H5 */
+				cursor: not-allowed;
+				/* #endif */
+				background-color: #F2F6FC;
+				border-color: $border-color;
+			}
+
+			// 选中
+			&.is-checked {
+				border-color: $checked-color;
+				background-color: $checked-color;
+
+				.checkbox__inner-icon {
+					opacity: 1;
+					transform: rotate(45deg);
+				}
+
+				// 选中禁用
+				&.is-disable {
+					opacity: $disable;
+				}
+			}
+
+		}
+	}
+</style>

uni_modules/zb-table/components/zb-table/components/table-h5-summary.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="table-h5-footer top-header-uni" :style="{paddingRight:`${scrollbarSize}px`}">
+    <scroll-view class="zb-table-headers"
+                 @scroll="handleFooterTableScrollLeft"
+                 scroll-x="true"
+                 scroll-y="false"
+                 id="tableFooterHeaders"
+                 scroll-anchoring="true"
+                 :scroll-left="headerFooterTableLeft"
+                 style="padding-bottom: 0px;
+						background: #fafafa;height: 100%">
+      <view class="zb-table-fixed" >
+        <view class="zb-table-thead" style="position: relative;" >
+          <view class="item-tr">
+            <view
+                class="item-th"
+                :style="{
+	                              width:`${item.width?item.width:'100'}px`,
+															  flex:index===transColumns.length-1?1:'none',
+															  minWidth:`${item.width?item.width:'100'}px`,
+															  borderRight:`${border?'1px solid #e8e8e8':''}`,
+															  borderTop:`${border?'1px solid #e8e8e8':''}`,
+															  textAlign:item.align||'left'
+														  }"
+                v-for="(item,index) in transColumns" :key="index">
+              {{ sums[index] }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script>
+import summary from '../js/summary.js'
+export default {
+  name:'table-footer',
+  mixins:[summary],
+}
+</script>
+<style lang="scss" scoped>
+.table-h5-footer {
+  background: #fafafa;
+  /*每个页面公共css */
+  scroll-view ::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  //第二种
+  ::-webkit-scrollbar{
+    display: none;
+  }
+  .item-tr{
+    display: flex;
+  }
+  .item-th{
+    padding-left: 8px;
+    line-height: 39px;
+    height: 40px;
+    //display: flex;
+    //align-items: center;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 100px;
+    padding-right: 20px;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    border-bottom: 1px solid #e8e8e8;
+  }
+
+}
+</style>

uni_modules/zb-table/components/zb-table/components/table-side-summary.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="zb-table-header" style="display: flex;" >
+    <view class="item-tr" >
+      <view class='item-td'
+            :style="{
+	                       width:`${item.width?item.width:'100'}px`,
+	                       borderRight:`${border?'1px solid #e8e8e8':''}`,
+	                       textAlign:item.align||'left'
+	                      }"
+            :key="`15255966555${index}`"
+            v-for="(item,index) in fixedLeftColumns">
+        <template >
+          {{sums[index]}}
+        </template>
+      </view>
+    </view>
+  </view>
+
+</template>
+<script>
+import summary from '../js/summary.js'
+export default {
+  mixins:[summary]
+}
+</script>
+<style lang="scss" scoped>
+.zb-table-header {
+  overflow: hidden;
+  background: #fafafa;
+  .item-th{
+    padding-left: 8px;
+    line-height: 39px;
+    height: 40px;
+    //display: flex;
+    //align-items: center;
+    box-sizing: border-box;
+  }
+}
+.item-tr{
+  display: flex;
+  box-sizing: border-box;
+}
+.item-td{
+  flex-shrink: 0;
+  width: 100px;
+  padding-left: 8px;
+  height: 40px;
+  line-height: 40px;
+  padding-right: 20px;
+  box-sizing: border-box;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  border-bottom: 1px solid #e8e8e8;
+  background: rgb(250, 250, 250);
+}
+</style>

uni_modules/zb-table/components/zb-table/components/table-summary.vue

@@ -0,0 +1,77 @@
+<template>
+  <view class="zb-table-footer" style="height: 40px;">
+    <view class="zb-table-fixed" >
+      <view class="zb-table-thead" style="position: relative;" >
+        <view class="item-tr">
+          <view
+              :class="['item-th',index <fixedLeftColumns.length&&'zb-stick-side']"
+              :style="{
+	                              left:`${item.left}px`,
+	                              width:`${item.width?item.width:'100'}px`,
+															  flex:index===transColumns.length-1?1:'none',
+															  minWidth:`${item.width?item.width:'100'}px`,
+															   borderRight:`${border?'1px solid #e8e8e8':''}`,
+															  borderTop:`${border?'1px solid #e8e8e8':''}`,
+															   textAlign:item.align||'left'
+														  }"
+              v-for="(item,index) in transColumns" :key="index">
+            <template>
+              {{ sums[index]||item.emptyString }}
+            </template>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import summary from '../js/summary.js'
+  export default {
+    mixins:[summary]
+  }
+</script>
+<style lang="scss" scoped>
+  .zb-table-footer {
+    background: #fafafa;
+    width: fit-content;
+    min-width: 100%;
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    .item-tr{
+      display: flex;
+      min-width: 100%;
+    }
+    .item-th{
+      padding-left: 8px;
+      line-height: 39px;
+      height: 40px;
+      //display: flex;
+      //align-items: center;
+      box-sizing: border-box;
+      flex-shrink: 0;
+      width: 100px;
+      padding-right: 20px;
+      word-break: keep-all;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+      border-bottom: 1px solid #e8e8e8;
+    }
+    .zb-table-fixed{
+      min-width: 100%;
+
+    }
+    .zb-stick-side{
+      position: sticky;
+      bottom:0 ;
+      left: 0;
+      z-index: 2;
+      //border-right: solid 1rpx #dbdbdb;
+      box-sizing: border-box;
+      background: #fafafa;
+      //box-shadow: 6px 0 6px -4px #ccc;
+    }
+  }
+</style>

uni_modules/zb-table/components/zb-table/js/summary.js

@@ -0,0 +1,88 @@
+export default {
+    props:{
+        scrollbarSize:{
+            type:Number,
+            default:0
+        },
+        fixedLeftColumns:{
+            type:Array,
+            default:()=>[]
+        },
+        data:{
+            type:Array,
+            default:()=>[]
+        },
+        transColumns:{
+            type:Array,
+            default:()=>[]
+        },
+        border:{
+            type:Boolean,
+            default:false
+        },
+        showSummary:{
+            type:Boolean,
+            default:false
+        },
+        summaryMethod:{
+            type:Function
+        },
+        sumText:{
+            type:String,
+            default:'合计'
+        },
+        headerFooterTableLeft:{
+            type:Number,
+            default:0
+        },
+        handleFooterTableScrollLeft:Function,
+    },
+    data(){
+        return{
+            sums:[]
+        }
+    },
+    watch:{
+        'data':{
+            deep:true,
+            immediate:true,
+            handler(newValue,oldValue){
+                let sums = [];
+                if (this.summaryMethod) {
+                    sums = this.summaryMethod({ columns: this.transColumns, data: this.data });
+                } else {
+                    this.transColumns.forEach((column, index) => {
+                        if (index === 0) {
+                            sums[index] = this.sumText;
+                            return;
+                        }
+                        const values = this.data.map(item => Number(item[column.name]));
+                        const precisions = [];
+                        let notNumber = true;
+                        values.forEach(value => {
+                            if (!isNaN(value)) {
+                                notNumber = false;
+                                let decimal = ('' + value).split('.')[1];
+                                precisions.push(decimal ? decimal.length : 0);
+                            }
+                        });
+                        const precision = Math.max.apply(null, precisions);
+                        if (!notNumber) {
+                            sums[index] = values.reduce((prev, curr) => {
+                                const value = Number(curr);
+                                if (!isNaN(value)) {
+                                    return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
+                                } else {
+                                    return prev;
+                                }
+                            }, 0);
+                        } else {
+                            sums[index] = '';
+                        }
+                    });
+                }
+                this.sums = sums
+            },
+        }
+    }
+}

uni_modules/zb-table/components/zb-table/js/util.js

@@ -0,0 +1,51 @@
+/**
+ * 获取滚动条宽度
+ */
+let cached = undefined;
+
+export const getScrollbarSize = fresh => {
+	// #ifdef H5
+	
+    if (fresh || cached === undefined) {
+        let inner = document.createElement("div");
+        let innerStyle = inner.style;
+
+        innerStyle.width = "100%";
+        innerStyle.height = "200px";
+
+        let outer = document.createElement("div");
+        let outerStyle = outer.style;
+
+        outerStyle.position = "absolute";
+        outerStyle.top = 0;
+        outerStyle.left = 0;
+        outerStyle.pointerEvents = "none";
+        outerStyle.width = "200px";
+        outerStyle.height = "150px";
+        outerStyle.visibility = "hidden";
+
+        outer.appendChild(inner);
+        document.body.appendChild(outer);
+
+        // 设置子元素超出部分隐藏
+        outerStyle.overflow = "hidden";
+
+        let width1 = inner.offsetWidth;
+
+        // 设置子元素超出部分滚动
+        outer.style.overflow = "scroll";
+
+        let width2 = inner.offsetWidth;
+
+        if (width1 === width2) {
+            width2 = outer.clientWidth;
+        }
+
+        document.body.removeChild(outer);
+
+        cached = width1 - width2;
+    }
+	//#endif
+
+    return cached;
+};

uni_modules/zb-table/package.json

@@ -0,0 +1,81 @@
+{
+  "id": "zb-table",
+  "displayName": "zb-table（多功能表格）",
+  "version": "1.2.18",
+  "description": "表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端",
+  "keywords": [
+    "table",
+    "表格",
+    "固定表头、固定首列、多列",
+    "上拉加载更多、",
+    "排序、自适应列宽、多选checkbox、编辑、删除、按钮、合计"
+],
+  "repository": "https://github.com/zouzhibin/zb-table.git",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/zb-table/readme.md

@@ -0,0 +1,189 @@
+
+## 介绍
+基于uni-app开发的一个普通的表格组件，功能有固定首列和表头、排序、操作按钮、
+table 表格 固定表头、固定首列、多列 上拉加载更多、 排序、自适应列宽、多选checkbox、编辑、删除、按钮、合计
+已用于生产环境
+
+微信=》 19550102670 拉进群
+## -- github 第一时间会更新到github，永远保持最新，有啥想法的可以提PR,共同开发 [地址](https://github.com/zouzhibin/zb-ui)
+
+## 友情链接
+### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](https://yuanzbz.gitee.io/vue-admin-perfect/#/login?redirect=/home)
+### vue-admin-perfect —— [企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus  最新版，同时支持电脑，手机，平板)](https://github.com/zouzhibin/vue-admin-perfect)
+
+
+## table 属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
+| ------ | ------ | ------ | ------ | ------ |------ |
+| data | 显示的数据 | array |-- | -- |必须 |
+| column | 显示的列数据 | array |-- | -- |必须 |
+| stripe | 是否为斑马纹 table| boolean | - |false | 否 |
+| fit | 列的宽度是否自撑开 | boolean |true,false | false |否 |
+| show-header | 是否显示表头 | boolean |true,false | true |否 |
+| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object |-- | -- |否 |
+| cell-header-style | 头部单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({ column, columnIndex})/Object |-- | -- |否 |
+| formatter | colomn =》formatter 必须设置为true,才有作用，进行格式化数据，进行数据的转换 | Function({row, column, rowIndex, columnIndex})/Object |-- | -- |否 |
+| border | 是否带有纵向边框 | boolean |true,false | true |否 |
+| highlight | 是否要高亮当前行 | boolean |true,false | false |否 |
+| show-summary | 是否在表尾显示合计行 | boolean |true,false | false |否 |
+| sum-text | 合计行第一列的文本 | String |- | 合计 |否 |
+| summary-method | 自定义的合计计算方法 | Function({ columns, data }) |- | - |否 |
+| permissionBtn | 是否动态控制按钮的显示隐藏 | Function({ row, renders,index }) |- | - |否 |
+| isShowLoadMore | 是否开启上拉加载 | boolean |true,false | false |否 |
+| pullUpLoading | 开启上拉加载后的返回函数，接收参数done是函数,done(type),type为空代表还有数据，继续开启上拉加载，type='ok',代表结束上拉加载 | Function(done) |-- | -- |否 |
+
+```
+关闭上拉加载的方式1：pullUpLoading((done)=>{
+	done(type)
+})
+done 接收参数为 type ，type为空代表还有数据，可以继续加载，无数据的时候传入 'ok'代表结束
+```
+
+## table 事件
+| 参数 | 说明 | 类型 | 可选值                      | 默认值 |是否必须|
+| ------ | ------ | ------ |--------------------------| ------ |------ |
+| 事件名自定义 | 取决于type类型为operation的 renders参数里面 func 的参数名 | Function | (row,index)=>{}          | -- |否 |
+| sort-change | 取决于type类型为operation的 renders参数里面 func 的参数名 | Function | (column,model,index)=>{} | -- |否 |
+| currentChange | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight属性,this.$refs.table.resetHighlight()清除选中 | Function | (row,index)=>{}          | -- |否 |
+| toggleRowSelection | 用于多选表格，切换某一行的选中状态，第一个参数代表选中状态，参数二代表选中的对象 | Function | (selected ,array)=>{}    | -- |否 |
+| toggleAllSelection | 用于多选表格，切换所有行的选中状态 ，第一个参数代表选中状态，参数二代表选中的对象| Function | (selected ,array)=>{}    | -- |否 |
+| rowClick | 单击某行 ，第一个参数代表选中对象，参数二代表选中的index| Function | (row ,index)=>{}         | -- |否 |
+| cellClick | 单击单元格 ，当某个单元格被点击时会触发该事件| Function | (row ,index,column)=>{}        | -- |否 |
+| pullUpLoading | 开启上拉加载后的返回函数，无参数| Function  | --                       |-- |否 |
+
+```
+关闭上拉加载的方式2：this.$refs.zbTable.pullUpCompleteLoading('ok')
+接收参数为 type ，type为空代表还有数据，可以继续加载，无数据的时候传入 'ok'代表结束
+```
+
+## data 属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------ | ------ | ------ | ------ | ------ |
+| checked | 是否被勾选 | boolean |true,false | 无 |
+
+
+## column 属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------ | ------ | ------ | ------ | ------ |
+| name | 属性值 | string |-- | 无 |
+| label | 显示的标题 | string |-- | 无 |
+| width | 列的宽度 | number |-- | 100 |
+| fixed | 列是否固定在左侧，true 表示固定在左侧 | boolean |true,false | true |
+| sorter | 排序，当设置为custom的时候代表自定义排序，不会再触发默认排序，会触发table事件@sort-change,可以通过接口来进行排序 | boolean |true,false,'custom' | false |
+| emptyString | 当值为空的时候默认显示的值 | string |  | -- |
+| filters | 对象过滤的选项，对象格式，对象中的元素需要有 key 和 value 属性。 | Object | {key:value} | -- |
+| align | 对齐方式 | String | left/center/right | left |
+| type | 为 operation 的时候代表为操作按钮,img的时候代表图片地址,index代表序列号 | string | operation,img,index | -- |
+| renders | type 为operation的时候 必传 | Array | {name:'名字',func:"父元素接收事件名",type:"按钮的类型",size:"大小"} | -- |
+```
+type 为 operation 的时候代表为操作按钮
+renders 代表传入的按钮  Array  =>[
+    {
+        name:'编辑',
+        class:"", // 添加class
+        type:'primary',代表按钮的类型  type 为custom的时候自定义按钮 其他类型取决于uniapp buttom组件按钮
+        size:'mini',代表按钮的大小
+        func:'edit' // func 代表操作按钮点击的事件名字 父元素接收的事件 父元素 @edit
+        例如：// <zb-table @edit=""/> 
+        
+    }
+]
+```
+## 示例
+```
+<zb-table
+            :show-header="true"
+            :columns="column"
+            :stripe="true"
+            :fit="false"
+            show-summary
+            sum-text="合计"
+            @rowClick="rowClick"
+            :summary-method="getSummaries"
+            @toggleRowSelection="toggleRowSelection"
+            @toggleAllSelection="toggleAllSelection"
+            :border="true"
+            @edit="buttonEdit"
+            @dele="dele"
+            :data="data"></zb-table>
+```
+
+## 数据格式
+```
+column:[
+          { type:'selection', fixed:true,width:50 },
+          { name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
+          { name: 'age', label: '年纪',sorter:false,align:'right', },
+          { name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
+		  { name: 'img', label: '图片',type:"img" },
+          { name: 'address', label: '地址' },
+          { name: 'date', label: '日期',sorter:true },
+          { name: 'province', label: '省份' },
+          { name: 'city', label: '城市' },
+          { name: 'zip', label: '邮编' },
+          { name: 'operation', type:'operation',label: '操作',renders:[
+              {
+                name:'编辑',
+                func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
+              },
+              {
+                name:'删除',
+                type:'warn',
+                func:"dele"
+              },
+            ]},
+        ],
+ data:[
+          {
+            date: '2016-05-02',
+            name: '王小虎1',
+            province: '上海',
+            sex:'男',
+            age:'18',
+			img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
+            city: '普陀区',
+            address: '上海市普',
+            zip: 200333
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎2',
+            province: '上海',
+            sex:'男',
+            age:'18',
+            city: '普陀区',
+            address: '上海市普',
+            zip: 200333
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎3',
+            province: '上海',
+            sex:'男',
+            age:'18',
+            city: '普陀区',
+            address: '上海市普',
+            zip: 200333
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎4',
+            province: '上海',
+            sex:'男',
+            age:'18',
+            city: '普陀区',
+            address: '上海市普',
+            zip: 200333
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎5',
+            province: '上海',
+            sex:'男',
+            age:'18',
+            city: '普陀区',
+            address: '上海市普',
+            zip: 200333
+          }
+        ]       
+```