当前位置：首页 > news >正文

手机端使用表格填写表单问题

news 2025/8/4 9:18:15

背景：子表单渲染。新增功能。布局样式调整。
遇到问题。操作列存在的查看、编辑、删除按钮在样式上不能很好的兼容。
优化：将表格容器与新增按钮分离。
table-container与table-footer分离展示

在这里插入图片描述

修改后样式

在这里插入图片描述

<template><view class="dynamic-table"><view class="table-label"><text v-if="required" class="required-mark">*</text><text class="label-text">{{ label }}</text></view><view class="table-container"><view class="table-header"><view class="table-row table-header-row"><viewv-for="(column, index) in filterColumns":key="index"class="table-cell table-header-cell":class="{ 'action-cell': column.isAction }":style="{ width: column.tWidth || '150rpx' }">{{ column.tLabel }}</view></view></view><view class="table-body"><view v-if="tableData.length === 0" class="table-row table-body-row"><view class="table-cell table-body-cell" :style="{ width: (filterColumns.length - 1) * 150 + 'rpx' }"><text class="empty-text">暂无数据</text></view><view class="table-cell table-body-cell action-cell"><view class="action-buttons"><button class="action-btn view-btn" size="mini" disabled>查看</button><button class="action-btn edit-btn" size="mini" disabled>编辑</button><button class="action-btn delete-btn" size="mini" disabled>删除</button></view></view></view><view v-for="(item, index) in tableData" :key="index" class="table-row table-body-row"><viewv-for="(column, i) in filterColumns":key="i"class="table-cell table-body-cell":class="{ 'action-cell': column.isAction }":style="{ width: column.tWidth || '150rpx' }"><template v-if="column.isAction"><view class="action-buttons"><button class="action-btn view-btn" size="mini" @click="handleLook(index)">查看</button><button class="action-btn edit-btn" size="mini" @click="handleEdit(index)">编辑</button><button class="action-btn delete-btn" size="mini" @click="handleDelete(index)">删除</button></view></template><template v-else>{{ item[column.tKey] || '-' }}</template></view></view></view></view><view class="table-footer"><button class="add-btn" type="primary" size="mini" @click="handleAdd">新增</button></view><!-- 弹窗表单 --><uni-popup ref="popup" :mask-click="false"><view class="popup-content"><view class="popup-header"><text class="popup-title">{{ formIndex === -1 ? '新增' : readOnly ? '查看' : '编辑' }}</text></view><view class="popup-body"><view class="form-container"><view v-for="(item, index) in columns" :key="index" class="form-item"><view class="form-label"><text v-if="required" class="required-mark">*</text><text class="label-text">{{ item.tLabel }}</text></view><view class="form-input"><inputv-model="baseFormData[item.tKey]"class="input-field":placeholder="`请输入${item.tLabel}`":disabled="readOnly"@input="handleFormInput" /></view></view><view class="popup-actions"><button v-if="!readOnly" type="primary" size="mini" @click="handleSubmit" class="submit-btn">提交</button><button type="default" size="mini" @click="close" class="close-btn">关闭</button></view></view></view></view></uni-popup></view>
</template>
...