feat: table 重构

components/Table/Table.vue

+<template>
+	<view class="normal-table">
+		<NormalTitle :elementInfo="elementInfo"></NormalTitle>
+		<scroll-view v-if="chartTables.length" scroll-x="true" class="scroll-view_H">
+			<view
+				class="table"
+				:style="[tableStyle]"
+			>
+				<view class="tr" v-if="elementInfo.table.tableHeader.showHeader">
+					<view class="th" v-for="(item, index) in columns" :key="index" :style="[thStyle]">{{item.title}}</view>
+				</view>
+				<view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)">
+					<view class="td" :style="[tdStyle]" v-for="(item, index) in columns" :key="index">
+						<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
+						<template v-else-if="item.slots.customRender == 'picture'">
+							<u-image
+								:height="100"
+								mode="aspectFit"
+								:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
+								crossOrigin="anonymous"
+								@click="imageClick(cellIndex, item.dataIndex)"
+							></u-image>
+						</template>
+						<template v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
+						<template v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</template>
+						<template v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
+						<template v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template>
+						<template v-else>{{cell[item.dataIndex]}}</template>
+					</view>
+				</view> 
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import echartElementData from '@/mixins/echartElementData.js'
+	
+	export default {
+		name:"NormalTable",
+		mixins: [echartElementData],
+		data() {
+			return {
+				columns: [],
+				chartTables: [],
+				align: {
+					left: 'start',
+					center: 'center',
+					right: 'end'
+				}
+			};
+		},
+		mounted() {
+			
+		},
+		computed: {
+			tableStyle() {
+				const { frameStyle, frameWidth, frameColor } = this.elementInfo.table
+				const { backgroundColor } = this.elementInfo.table.tableCell
+				return {
+					'width': `${240 * this.columns.length}rpx`,
+					'border-left': `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`,
+					'border-top': `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`,
+					'background-color': backgroundColor
+				}
+			},
+			thStyle() {
+				const { frameStyle, frameWidth, frameColor } = 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': `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`,
+					'border-right': `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`
+				}
+			},
+			tdStyle() {
+				const { frameStyle, frameWidth, frameColor } = 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': `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`,
+					'border-right': `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`
+				}
+			}
+		},
+		methods: {
+			initChart() {
+				this.$nextTick(() => {
+					this.columns = this.elementInfo.table.column
+					this.chartTables = this.elementData.dataList.chartTables
+				})
+			},
+			cellClick(e) {
+				const { index, data } = this.elementInfo.child
+				const paramName = this.elementInfo.table.primaryKey
+				const value = e[paramName]
+				uni.$emit('handleLinkParams', { index, paramName, value: value })
+			},
+			
+			// 图片增加点击事件，查看全部图片
+			imageClick(index, key) {
+				const images = []
+				for(var i = 0; i < this.chartTables.length; i++) {
+					const imageUrl = this.chartTables[i][key]
+					images.push(imageUrl)
+				}
+				uni.previewImage({
+					current: index,
+					urls: images,
+					indicator: 'number',
+					loop: true
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.normal-table {
+	width: 100%;
+	margin-top: 20px;
+}
+.scroll-view_H {
+	display: flex;
+	flex-wrap: nowrap;
+}
+.table {
+	width: 100%;
+	box-sizing: border-box;
+}
+.tr {
+	display: flex;
+	flex-direction: row;
+}
+.th {
+	flex: 0 0 240rpx;
+	font-size: 28rpx;
+	color: $u-main-color;
+	font-weight: bold;
+	padding: 12rpx;
+	background-color: rgb(245, 246, 248);
+}
+.td{
+	flex: 0 0 240rpx;
+	align-self: stretch;
+	padding: 12rpx;
+	font-size: 28rpx;
+	color: $u-content-color;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
\ No newline at end of file

pages/index/index.vue

@@ -55,7 +55,8 @@
 					<!-- 远程图片 -->
 					<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
 					<!-- 普通表格 -->
-					<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
+					<!-- <NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable> -->
+					<Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table>
 				</view>
 			</template>
 		</view>