T泰达T
T泰达T
  • 发布:2021-03-31 15:39
  • 更新:2024-08-07 10:35
  • 阅读:9318

【报Bug】uni-table组件表格宽度错误

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.7

浏览器平台: Chrome

浏览器版本: 88.0.4324.190(正式版本)

项目创建方式: HBuilderX

操作步骤:
<uni-tr>  
                <uni-th width="50rpx" align="center">ID</uni-th>  
                <uni-th  align="center">图片</uni-th>  
                <uni-th width="150rpx" align="center">文本</uni-th>  
                <uni-th width="100rpx" align="center">操作</uni-th>  
            </uni-tr>

预期结果:

操作一栏比较窄

实际结果:

操作一栏很宽

bug描述:

配置的表格th的width,结果不起作用

2021-03-31 15:39 负责人:无 分享
已邀请:
z***@163.com

z***@163.com

uni-table上添加宽度为100%; uni-th上的width属性设置为数字,不要设置成rpx、px、百分比这些都是不起作用的。

    <view style="width: 740rpx;">  
        <uni-table width="100%" border stripe emptyText="没有更多数据">  
            <uni-tr>  
                <uni-th width="25">序号</uni-th>  
                <uni-th width="50">作品名称</uni-th>  
                <uni-th width="25">作者</uni-th>  
            </uni-tr>  
            <uni-tr v-for="(item,index) in bookListTyp1">  
                <uni-td>{{item.bookSeq}}</uni-td>  
                <uni-td>{{item.bookName}}</uni-td>  
                <uni-td>楚河</uni-td>  
            </uni-tr>  
        </uni-table>  
    </view>
红尘低代码

红尘低代码 - 低代码研究者

给uni-th加上一个最小宽度的样式就解决了
<uni-th align="center" style="min-width: 100px;">表头</uni-th>

  • m***@gmail.com

    不行,这个bug还是没有解决,不管是通过ref还是通过原生方法给他设置宽度都不正确,宽度是改了,但是不正确

    2023-09-11 10:55

1***@163.com

1***@163.com

我也是这个问题求解决办法

4***@qq.com

4***@qq.com

请问这个问题解决了吗

橘子ist

橘子ist

请问解决了吗

1***@qq.com

1***@qq.com

我刚开始也是用 uni-table 后来也有问题,我现在用的是 uView 的 u-table,没问题,

  • 橘子ist

    谢谢回复,我试了一下,宽度的确有用,但是我的列数量稍微有点多,所以渲染完之后,就页面假死拖不动了。我在uni-table下面找到一个解决方法,就是在uni-td里面的文本加一层view然后把宽度写那上面就可以用了。

    2021-11-08 15:51

DCloud_UNI_HT

DCloud_UNI_HT

uni-table 的 width 属性 暂时不支持 rpx 的单位

  • 橘子ist

    不加单位好像也没有成功,要用px吗?

    2021-11-08 16:48

  • DCloud_UNI_HT

    回复 橘子ist: 不需要 ,直接传如数值就行

    2021-11-09 09:42

  • w***@live.com

    回复 DCloud_UNI_HT:

    <uni-th width="200" align="left" filter-type="search" @filter-change="filterChange($event, 'address')" sortable @sort-change="sortChange($event, 'address')">服务地址</uni-th>

    直接传数值也有问题,没有变化。

    2022-05-09 08:08

z***@163.com

z***@163.com

必须要设置th的宽度 ,比如table宽度为100%,有五个标题头的话,那每个th为25%。这样才会奏效。
<uni-table class="u-table" style="100%">
<uni-tr>
<uni-th align="center" width="20%">年份</uni-th>
<uni-th align="center" width="20%">省份</uni-th>
<uni-th align="center" width="20%">最低分</uni-th>
<uni-th align="center" width="20%">最高分</uni-th>
<uni-th align="center" width="20%">平均分</uni-th>
</uni-tr>
</uni-table>

c***@qq.com

c***@qq.com

不能加单位, 它默认是px,所以直接传数值就可以了, 只能给 th 设置宽度

1***@qq.com

1***@qq.com

宽度设置只支持数字,不支持百分比,内容过长会产生宽度大于手机屏幕宽度有滚动条

k***@163.com

k***@163.com

这个bug 今天依然存在
width 就是没有效果

  • DCloud_UNI_HT

    不要使用单位试一下,只需要给 tr 下的 th 设置宽度即可,如果所有 th 都设置了宽度,且宽度小于100% ,则是按照设置宽度的百分比设置宽度

    2023-12-05 14:37

c***@163.com

c***@163.com

uni-table在样式中会有一个默认的min-width,在style中设置/deep/.uni-table{ min-width:0px !important } 解决,然后根据uni-th数量设置对应宽度

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容