feat: table style

components/NormalTable/NormalTable.vue

@@ -2,17 +2,13 @@
 	<view class="normal-table" :style="{ transform: `scaleY(${scale}) translate(0px, ${elementInfo.height * (scale - 1) /2}px)`}">
 		<NormalTitle :elementInfo="elementInfo"></NormalTitle>
 		<scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
-			<view
-				class="table"
-				:style="[tableStyle]"
-			>
+			<view class="table">
 				<view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
 					<template v-for="(item, index) in elementInfo.table.column">
 						<view
-							class="th"
+							class="th th_style"
 							:class="[index == 0 ? 'row_fixed': '']"
 							:key="index"
-							:style="[thStyle]"
 						>{{item.title}}</view>
 					</template>
 				</view>
@@ -27,9 +23,8 @@
 					<view
 						v-for="(item, index) in elementInfo.table.column"
 						:key="index"
-						class="td"
+						class="td td_style"
 						:class="[item.dataIndex == elementInfo.table.column[0].dataIndex ? 'row_fixed': '']"
-						:style="[tdStyle]"
 					>
 						<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
 						<template v-else-if="item.slots.customRender == 'picture'">
@@ -66,57 +61,34 @@
 				align: {
 					left: 'start',
 					center: 'center',
-					right: 'end'
+					right: 'flex-end'
 				},
 				scale: 1
 			};
 		},
 		computed: {
 			tableConfigStyle() {
-				const { evenColor, oddColor } = this.elementInfo.table.tableCell
-				const { headerRowHeight, titleColor, backgroundColor: headerBackgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
+				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
 				return {
+					'--table-width': `${130 * this.elementInfo.table.column.length}rpx`,
+					'--cell--background-color': cellBackgroundColor,
 					'--even-color': evenColor,
 					'--odd-color': oddColor,
-					'--header-background-color': headerBackgroundColor
-				}
-			},
-			tableStyle() {
-				const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
-				const { backgroundColor } = this.elementInfo.table.tableCell
-				return {
-					'width': `${130 * this.elementInfo.table.column.length}rpx`,
-					'border-left': 'none',
-					'border-top': 'none',
-					'background-color': backgroundColor
-				}
-			},
-			thStyle() {
-				const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
-				const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
-				return {
-					'lineHeight': `${headerRowHeight}px`,
-					'color': titleColor,
-					'background-color': backgroundColor,
-					'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx`,
-					'text-align': titlePostion || 'center',
-					'border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
-					'border-right':  'none'
+					'--header-background-color': headerBackgroundColor,
+					'--header-row-height': `${headerRowHeight}px`,
+					'--header-color': headerTitleColor,
+					'--header-font-size': `${this.$u.common.pxToRpx(headerTitleFontSize)}rpx`,
+					'--header-text-align': headerTitlePostion || 'center',
+					'--header-border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
+					'--cell-text-align': cellTitlePostion,
+					'--cell-justify-content': this.align[cellTitlePostion],
+					'--cell-font-size': `${cellTitleFontSize || 14}px`,
+					'--cell-row-height': `${cellRowHeight || 30}px`,
+					'--cell-color': cellTitleColor
 				}
 			},
-			tdStyle() {
-				const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
-				const { titlePostion, titleFontSize, cellRowHeight, titleColor } = this.elementInfo.table.tableCell
-				return {
-					'text-align': titlePostion,
-					'justify-content': this.align[titlePostion],
-					'font-size': `${titleFontSize || 14}px`,
-					'lineHeight': `${cellRowHeight || 30}px`,
-					'color': titleColor,
-					'border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
-					'border-right':  'none'
-				}
-			}
 		},
 		methods: {
 			initChart() {
@@ -203,8 +175,9 @@
 	height: 100%;
 }
 .table {
-	width: 100%;
+	width: var(--table-width);
 	box-sizing: border-box;
+	background-color: var(--cell--background-color);
 	.table_header {
 		position: sticky;
 		top: 0;
@@ -248,6 +221,24 @@
 	flex: 0 0 220rpx;
 }
 
+.th_style {
+	line-height: var(--header-row-height);
+	font-size: var(--header-font-size);
+	color: var(--header-color);
+	background-color: var(--header-background-color);
+	text-align: var(--header-text-align);
+	border-bottom: var(--header-border-bottom);
+}
+
+.td_style {
+	text-align: var(--cell-text-align);
+	justify-content: var(--cell-justify-content);
+	font-size: var(--cell-font-size);
+	line-height: var(--cell-row-height);
+	color: var(--cell-color);
+	border-bottom: var(--header-border-bottom);
+}
+
 .even-striped {
 	background-color: var(--even-color);
 }