feat: table width

components/NormalTable/NormalTable.vue

@@ -71,8 +71,10 @@
 				const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
 				const { evenColor, oddColor, backgroundColor: cellBackgroundColor, titlePostion: cellTitlePostion, titleFontSize: cellTitleFontSize, cellRowHeight, titleColor: cellTitleColor} = this.elementInfo.table.tableCell
 				const { headerRowHeight, titleColor: headerTitleColor, backgroundColor: headerBackgroundColor, titlePostion: headerTitlePostion, titleFontSize: headerTitleFontSize } = this.elementInfo.table.tableHeader
+				const cellWidth = this.elementInfo.table.column.length > 10 ? 130 : 240
 				return {
-					'--table-width': `${130 * this.elementInfo.table.column.length}rpx`,
+					'--table-width': `${cellWidth * this.elementInfo.table.column.length}rpx`,
+					'--cell-width': `0 0 ${cellWidth}rpx`,
 					'--cell--background-color': cellBackgroundColor,
 					'--even-color': evenColor,
 					'--odd-color': oddColor,
@@ -194,19 +196,15 @@
 	flex-direction: row;
 }
 .th {
-	flex: 0 0 130rpx;
+	flex: var(--cell-width);
 	font-size: 28rpx;
 	color: $u-main-color;
 	padding: 10px 0px;
 	background-color: rgb(245, 246, 248);
 }
 
-.th-large {
-	flex: 0 0 220rpx;
-	font-weight: bold;
-}
 .td{
-	flex: 0 0 130rpx;
+	flex: var(--cell-width);
 	align-self: stretch;
 	padding: 10px 0px ;
 	font-size: 28rpx;
@@ -216,10 +214,6 @@
 	justify-content: center;
 }
 
-.td-large{
-	flex: 0 0 220rpx;
-}
-
 .th_style {
 	line-height: var(--header-row-height);
 	font-size: var(--header-font-size);