feat: table style

components/NormalTable/NormalTable.vue

 <template>
 	<view >
-		<!-- <BasicText :elementInfo="elementInfo"></BasicText> -->
 		<NormalTitle :elementInfo="elementInfo"></NormalTitle>
 		<scroll-view scroll-x="true" >
 			<view class="scroll-view_H">
-				<u-table >
-					<u-tr v-if="elementInfo.table.tableHeader.showHeader" :style="[headerStyle]">
+				<u-table
+					class="normal-table"
+					:border-width="elementInfo.table.frameWidth"
+					:border-color="elementInfo.table.frameColor"
+					:border-style="elementInfo.table.frameStyle"
+					:bg-color="elementInfo.table.tableCell.backgroundColor"
+					:color="elementInfo.table.tableCell.titleColor"
+					:font-size="$u.common.pxToRpx(elementInfo.table.tableCell.titleFontSize)"
+					:align="elementInfo.table.tableCell.titlePostion"
+					:th-style="headerStyle"
+				>
+					<u-tr v-if="elementInfo.table.tableHeader.showHeader">
 						<u-th v-for="(item, index) in columns" :key="index">{{item.title}}</u-th>
 					</u-tr>
 					<u-tr v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)">
-						<u-td style="width: 150px;"  v-for="(item, index) in columns" :key="index">
+						<u-td v-for="(item, index) in columns" :key="index">
 							{{cell[item.dataIndex]}}
 						</u-td>
 					</u-tr> 
 				</u-table>
 			</view>
-			
 		</scroll-view>
-		
 	</view>
 </template>
 
@@ -38,11 +45,13 @@
 		},
 		computed: {
 			headerStyle() {
+				const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
 				return {
-					'width': '150rpx',
-					'height': this.elementInfo.table.tableHeader.headerRowHeight + 'px',
-					'color': this.elementInfo.table.tableHeader.titleColor,
-					'background-color': this.elementInfo.table.tableHeader.backgroundColor,
+					'height': `${this.$u.common.pxToRpx(headerRowHeight)}rpx`,
+					'color': titleColor,
+					'background-color': backgroundColor,
+					'text-align': titlePostion,
+					'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx`
 				}
 			}
 		},
@@ -64,11 +73,12 @@
 </script>
 
 <style scoped lang="scss">
-
- .scroll-view_H {
+.scroll-view_H {
 	width: 100%;
 	display: flex;
 	flex-wrap: nowrap;
 }
-
+.normal-table {
+	width: 100%;
+}
 </style>

uview-ui/components/u-table/u-table.vue

@@ -27,6 +27,14 @@
 				type: String,
 				default: '#e4e7ed'
 			},
+			borderWidth: {
+				type: Number,
+				default: 1
+			},
+			borderStyle: {
+				type: String,
+				default: 'solid'
+			},
 			align: {
 				type: String,
 				default: 'center'
@@ -65,9 +73,9 @@
 		computed: {
 			tableStyle() {
 				let style = {};
-				style.borderLeft = `solid 1px ${this.borderColor}`;
-				style.borderTop = `solid 1px ${this.borderColor}`;
-				style.backgroundColor = this.bgColor;;
+				style.borderLeft = `${this.borderStyle} ${this.borderWidth}px ${this.borderColor}`;
+				style.borderTop = `${this.borderStyle} ${this.borderWidth}px ${this.borderColor}`;
+				style.backgroundColor = this.bgColor;
 				return style;
 			}
 		}

uview-ui/components/u-td/u-td.vue

@@ -40,8 +40,8 @@
 				style.textAlign = this.parent.align;
 				style.fontSize = this.parent.fontSize + 'rpx';
 				style.padding = this.parent.padding;
-				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
-				style.borderRight = `solid 1px ${this.parent.borderColor}`;
+				style.borderBottom = `${this.parent.borderStyle} ${this.parent.borderWidth}px ${this.parent.borderColor}`;
+				style.borderRight = `${this.parent.borderStyle} ${this.parent.borderWidth}px ${this.parent.borderColor}`;
 				style.color = this.parent.color;
 				this.tdStyle = style;
 			}

uview-ui/components/u-th/u-th.vue

@@ -37,9 +37,9 @@
 				if (this.width) style.flex = `0 0 ${this.width}`;
 				style.textAlign = this.parent.align;
 				style.padding = this.parent.padding;
-				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
-				style.borderRight = `solid 1px ${this.parent.borderColor}`;
-				Object.assign(style, this.parent.style);
+				style.borderBottom = `${this.parent.borderStyle} ${this.parent.borderWidth}px ${this.parent.borderColor}`;
+				style.borderRight = `${this.parent.borderStyle} ${this.parent.borderWidth}px ${this.parent.borderColor}`;
+				Object.assign(style, this.parent.thStyle);
 				this.thStyle = style;
 			}
 		}