uni-app Uni-table不支持渲染app表头错乱问题

uni-app Uni-table不支持渲染app表头错乱问题

产品分类

uniapp/App

PC开发环境操作系统

Windows

PC开发环境操作系统版本号

22H2

HBuilderX类型

正式

HBuilderX版本号

4.76

手机系统

Android

手机系统版本号

Android 16

手机厂商

华为

手机机型

16pro

页面类型

vue

vue版本

vue2

打包方式

云端

项目创建方式

HBuilderX

App下载地址或H5网址

https://sale-test.profly.com.cn/

示例代码

<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">日期</uni-th>
<uni-th align="center">姓名</uni-th>
<uni-th align="left">地址</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>2020-10-20</uni-td>
<uni-td>Jeson</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-21</uni-td>
<uni-td>HanMeiMei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-22</uni-td>
<uni-td>LiLei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-23</uni-td>
<uni-td>Danner</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
</uni-table>

操作步骤

直接使用官网demo 本地基座打包 采用表格组件 布局 直接会有样式问题

预期结果

希望能正常显示

实际结果

表格样式错乱

bug描述

官网的demo 也是 会有样式问题


更多关于uni-app Uni-table不支持渲染app表头错乱问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app Uni-table不支持渲染app表头错乱问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在App端使用uni-table组件时出现表头样式错乱是已知的兼容性问题。这是由于uni-table在App平台底层实现与H5存在差异导致的。

建议的解决方案:

  1. 检查并确保所有列宽设置一致,避免使用百分比宽度
  2. 为uni-th和uni-td添加固定宽度,例如:
<uni-th width="100px" align="center">日期</uni-th>
<uni-td width="100px">2020-10-20</uni-td>
回到顶部