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存在差异导致的。
建议的解决方案:
- 检查并确保所有列宽设置一致,避免使用百分比宽度
- 为uni-th和uni-td添加固定宽度,例如:
<uni-th width="100px" align="center">日期</uni-th>
<uni-td width="100px">2020-10-20</uni-td>

