关于uniapp使用uni-UI组件里的uni-table组件

分类：uni-app

uniapp

uni-table高度如何设置？因为我需要编译到微信小程序，想给整个表格一个最低高度，然后表格我放在了scroll-view里面

<scroll-view class="scroll-box" scroll-y="true" :style="{ height: calc(100vh - ${navBarHeight}px - 248rpx) }">
<view class="white-box count-box">
<uni-table ref="table" :loading="isLoading" emptyText="暂无更多数据" :style="{ minHeight: calc(100vh - ${navBarHeight}px - 248rpx) }">
<uni-tr>
<uni-th align="center">序号</uni-th>
<uni-th align="center">批次号</uni-th>
<uni-th align="center">关联订单号</uni-th>
<uni-th align="center">关联订单名</uni-th>
<uni-th align="center">基材</uni-th>
<uni-th align="center">颜色</uni-th>
<uni-th align="center">加工步骤</uni-th>
<uni-th align="center">订单时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in progressList" :key="item.id" class="uni-tr-custom">
<uni-td align="center">{{ item.serialNum || index + 1 }}</uni-td>
<uni-td align="center">{{ item.batchNum || '--' }}</uni-td>
<uni-td align="center">{{ item.orderNums || '--' }}</uni-td>
<uni-td align="center">{{ item.orderNames || '--' }}</uni-td>
<uni-td align="center">{{ item.materialNames || '--' }}</uni-td>
<uni-td align="center">{{ item.colors || '--' }}</uni-td>
<uni-td align="center">{{ item.processingSteps || '--' }}</uni-td>
<uni-td align="center">
<view :style="{ color: item.leftDayString && item.leftDayString.startsWith('逾期') ? 'red' : '#1a1a1a' }">{{ item.leftDayString || '--' }}</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
</scroll-view>

2026-01-31 09:24 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

该问题请在专业群（ uni-ui官方技术交流群）咨询，群中有相关专业的管理员和群友。

uni-table 在微信小程序里不会自动继承父级高度，必须显式设置高度或借助 flex 撑满 scroll-view。
您目前的写法：

<scroll-view :style="{ height: `calc(100vh - ${navBarHeight}px - 248rpx)` }">  
  <uni-table :style="{ minHeight: `calc(100vh - ${navBarHeight}px - 248rpx)` }">

仅给 uni-table 设置了 min-height，在微信小程序中无法让表格真正占满 scroll-view，内容不足时也不会出现纵向滚动条。

✅ 推荐做法（微信小程序场景）

方案 1：flex 布局（最稳妥）

<scroll-view  
  class="scroll-box"  
  scroll-y  
  :style="{ height: `calc(100vh - ${navBarHeight}px - 248rpx)` }"  
>  
  <view class="table-wrapper">  
    <uni-table  
      ref="table"  
      :loading="isLoading"  
      emptyText="暂无更多数据"  
      class="uni-table"  
    >  
      <!-- 表格内容 -->  
    </uni-table>  
  </view>  
</scroll-view>

.scroll-box {  
  display: flex;  
  flex-direction: column;  
}  

.table-wrapper {  
  flex: 1;  
  display: flex;  
  flex-direction: column;  
}  

.uni-table {  
  flex: 1;  
}

方案 2：直接给 uni-table 设置固定高度

如果您不想用 flex，也可以直接把高度写死：

<uni-table  
  :style="{ height: `calc(100vh - ${navBarHeight}px - 248rpx)` }"  
>

⚠️ 注意

微信小程序对 calc() 支持有限，建议把 navBarHeight 和 248rpx 提前换算成 具体 px 值（可用 uni.upx2px() 或 uni.getSystemInfoSync() 计算），避免真机异常。
scroll-view 必须设置固定高度，否则不会滚动。
避免在 scroll-view 内部再使用 min-height，容易导致内容无法滚动或高度异常。

✅ 小结

方式	是否推荐	说明
flex 撑满	✅ 推荐	兼容性好，适配各种机型
固定高度	✅ 可用	需手动换算 px，避免 calc 兼容问题
min-height	❌ 不推荐	微信小程序下无法撑满 scroll-view

如需固定表头，可参考社区自定义方案：uni-table 固定表头实现。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

关于uniapp使用uni-UI组件里的uni-table组件

1 个回复

✅ 推荐做法（微信小程序场景）

方案 1：flex 布局（最稳妥）

方案 2：直接给 uni-table 设置固定高度

✅ 小结

公告

相关问题

关于uniapp使用uni-UI组件里的uni-table组件

与内容相关的链接

1 个回复

✅ 推荐做法（微信小程序场景）

方案 1：flex 布局（最稳妥）

方案 2：直接给 uni-table 设置固定高度

✅ 小结

公告

相关问题