aiot-app/components/templateDiv/customTable.vue

<!-- 移动端表格组件 -->
<template>
	<view class="custom-table-container">
		<!-- 表格容器 -->
		<div class="table-wrapper" >
			<view class="table" :id="id">
				<view class="table-body">
					<template v-for="(row, index) in columns">
						<view class="column" :style="{ width: (row[0] && row[0].width) ? row[0].width + 'rpx' : '200rpx' }">
							<view class="table-body-item" v-for="(item, rowIndex) in row" :key="item.id" :style="{
                  height: item.rowspan > 1 ? (item.rowspan * 60) + 'rpx' : '60rpx',
                  display: item.rowspan ? 'flex' : 'none',
                  ...item.style,
                  width: item.colspan ? getWidth(item) : 'auto'
                }" :class="{
                  'is-header': rowIndex === 0,
                 
                  'is-readonly': equation[item.id]
                }">

								<!-- 输入框 -->
								<view class="input-wrapper">
									
									<textarea v-if="item.rowspan > 1" v-model="item.value" class="template-input"
										:id="item.id" :ref="item.id + 'ref'" :readonly="item.readonly == 2 || readonly||equation[item.id]"
										@input="calculation" :auto-height="true" :maxlength="200" />
									<input v-else v-model="item.value" class="template-input" :id="item.id"
										:ref="item.id + 'ref'" :disabled="item.readonly == 2 || readonly||equation[item.id]"
										@input="calculation" type="text" />
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</div>


	</view>
</template>

<script>
	import dictMixins from '@/mixins/dictMixins';


	export default {
		mixins: [dictMixins],
		props: {
			id: {
				type: String,
				default: ''
			},

			readonly: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				form: null,
				valueObj: {},
				domId: '',
				columns: [],
				units: {},
				equation: {},
			
			};
		},
		computed: {
	
		},
		methods: {
			getWidth(item) {
				let width = Number(item.style.width);
				if (item.colspanKey.length) {
					this.columns.forEach(cell => {
						cell.forEach(row => {
							if (item.colspanKey.includes(row.id)) {
								width += Number(row.style.width);
							}
						});
					});
				}
				return width + 'rpx';
			},

			calculation() {
				this.$emit('calculation');
			},

			equationValue({
				domId,
				value
			}) {
				this.columns.forEach((item, index) => {
					let cellIndex = item.findIndex(cell => cell.id == domId);
					if (cellIndex != '-1') {
						this.$set(this.columns[index][cellIndex], 'value', value);
					}
				});
			},

			getValue() {
				return {
					form: null,
					equation: this.equation,
					units: this.units,
					valueObj: {
						columns: this.columns
					}
				};
			},

			init({
				form,
				valueObj,
				equation,
				units
			}) {
				this.form = form;
				this.columns = valueObj.columns;
				this.equation = equation || {};
				this.units = units || {};
				console.log(this.units);
				console.log(this.equation);
			},

			editInputChange(domObj) {
				let data = JSON.parse(JSON.stringify(domObj));
				if (data.equation) {
					this.equation[data.id] = data.equation;
				}
				if (data.units) {
					this.units[data.id] = data.units;
				}
				// 移动端简化处理
				this.columns.forEach((item, index) => {
					let rowsIndex = item.findIndex(cells => cells.id == this.domId);
					this.$set(this.columns[index], rowsIndex, data);
					rowsIndex = item.findIndex(cells => cells.id == data.id);
					if (rowsIndex >= 0) {
						let width = data.width;
						let newWidth = this.columns[index][rowsIndex].style.width;
						this.columns[index][0].width = newWidth;
						item.forEach((cell, _index) => {
							this.$set(this.columns[index][_index].style, 'width', newWidth);
							this.$set(this.columns[index][_index], 'width', newWidth);
						});
					}
				});
			},


		}
	};
</script>

<style lang="scss" scoped>
	.custom-table-container {
		width: 100%;
		// overflow: hidden;



		.table-wrapper {
			width: 100%;
			// margin-top: 20rpx;

			.table {
				display: flex;
				min-width: 100%;

				.table-body {
					display: flex;

					.column {
						display: inline-block;

						.table-body-item {
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1rpx solid #ddd;
							background-color: #fff;
							overflow: hidden;

							&.is-header {
								// background-color: #f2f2f2;

								.template-input {
									// background-color: #f2f2f2;
								}
							}

							&.is-selected {
								// background-color: #e6f7ff;
								border-color: #1890ff;
							}

							&.is-readonly {
								background-color: #f9f9f9;
							}

							.cell-actions {
								position: absolute;
								top: 0;
								right: 0;
								display: none;
								z-index: 10;

								.action-btn {
									width: 40rpx;
									height: 40rpx;
									line-height: 40rpx;
									text-align: center;
									background-color: rgba(0, 0, 0, 0.5);
									color: #fff;
									border-radius: 50%;
									font-size: 28rpx;

									&.delete {
										color: #f56c6c;
									}

									&.add {
										color: #409eff;
										margin-left: 5rpx;
									}

									&.deleteRow {
										color: #f56c6c;
									}

									&.addRow {
										color: #409eff;
										margin-left: 5rpx;
									}
								}
							}

							&:active .cell-actions {
								display: flex;
							}

							.input-wrapper {
								width: 100%;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.template-input {
								width: 100%;
								height: 100%;
								border: none;
								text-align: center;
								background-color: transparent;
								font-size: 24rpx;
								padding: 0;
								line-height: 1.5;
							}

							textarea.template-input {
								padding: 10rpx;
								resize: none;
							}
						}
					}
				}
			}
		}

		.merge-tip {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 20rpx 40rpx;
			background-color: rgba(0, 0, 0, 0.7);
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			z-index: 1000;
		}

		.bottom-actions {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;

			.action-sheet {
				background-color: #fff;
				border-top: 1rpx solid #e0e0e0;

				.sheet-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #e0e0e0;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.cancel {
						font-size: 28rpx;
						color: #999;
					}
				}

				.sheet-content {
					padding: 30rpx;

					.sheet-btn {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						border-radius: 8rpx;
						font-size: 32rpx;

						&.primary {
							background-color: #157a2c;
							color: #fff;

							&:active {
								background-color: #0f5e20;
							}
						}
					}
				}
			}
		}
	}
</style>