uni-app中uni-table的uni-td列宽不自动根据uni-th宽度设置，在抖音小程序和百度小程序上宽度未被正确设置，被自动设为最小宽度

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app中uni-table的uni-td列宽不自动根据uni-th宽度设置，在抖音小程序和百度小程序上宽度未被正确设置，被自动设为最小宽度

示例代码：

<uni-table emptyText="暂无更多数据" style="width: 702rpx;">
<uni-tr>
<!-- #ifdef H5 -->
<uni-th align="center" width="50px"><text>男方</text></uni-th>
<uni-th align="center" width="50px"><text></text></uni-th>
<uni-th align="center" width="100px"><uni-icons type="heart-filled" size="30rpx" color="#C63137"></uni-icons><text>关系</text></uni-th>
<uni-th align="center" width="50px"><text></text></uni-th>
<uni-th align="center" width="50px"><text>女方</text></uni-th>
<!-- #endif -->
<!-- #ifndef H5 -->
<uni-th align="center" width="120rpx"><text>男方</text></uni-th>
<uni-th align="center" width="120rpx"><text></text></uni-th>
<uni-th align="center" width="220rpx"><uni-icons type="heart-filled" size="30rpx" color="#C63137"></uni-icons><text>关系</text></uni-th>
<uni-th align="center" width="120rpx"><text></text></uni-th>
<uni-th align="center" width="120rpx"><text>女方</text></uni-th>
<!-- #endif -->
</uni-tr>
<uni-tr v-for="(v,index) in shengxiao" :key="index">
<uni-td align="center"><text :user-select="true" :selectable="true">{{v.man}}</text></uni-td>
<uni-td align="center"><uni-icons type="arrow-right"></uni-icons></uni-td>
<uni-td align="center"><text :user-select="true" :selectable="true">{{v.desc}}</text></uni-td>
<uni-td align="center"><uni-icons type="arrow-left"></uni-icons></uni-td>
<uni-td align="center"><text :user-select="true" :selectable="true">{{v.woman}}</text></uni-td>
</uni-tr>
</uni-table>

操作步骤：

无

预期结果：

和微信小程序、支付宝小程序一样，uni-td的宽度根据uni-th的宽度自动继承设定。

实际结果：

无

bug描述：

uni-table下的uni-td列宽不会根据uni-th的宽度自动设置，在抖音小程序和百度小程序上宽度都没有设置，被自动设置为最小宽度了。


Harmonyos Next教程
2 回复

table 在抖音小程序有 bug，之后会修复。


在uni-app中，确实可能会遇到uni-table组件的列宽（uni-td）不会自动根据表头（uni-th）宽度设置的问题，特别是在不同的小程序平台上，如抖音小程序和百度小程序。这通常是由于小程序的渲染机制和CSS解析差异导致的。

为了解决这个问题，我们可以尝试通过显式设置列宽，或者使用一些CSS技巧来强制列宽。以下是一个示例代码，展示了如何在uni-app中手动设置uni-td的列宽，以确保它们与uni-th的宽度相匹配。

示例代码

1. 在页面的.vue文件中定义表格

<template>
  <view class="container">
    <uni-table :border="true">
      <uni-tr>
        <uni-th style="width: 30%;">Header 1</uni-th>
        <uni-th style="width: 40%;">Header 2</uni-th>
        <uni-th style="width: 30%;">Header 3</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td style="width: 30%;">{{ item.col1 }}</uni-td>
        <uni-td style="width: 40%;">{{ item.col2 }}</uni-td>
        <uni-td style="width: 30%;">{{ item.col3 }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { col1: 'Data 1-1', col2: 'Data 1-2', col3: 'Data 1-3' },
        { col1: 'Data 2-1', col2: 'Data 2-2', col3: 'Data 2-3' },
        // 更多数据...
      ]
    };
  }
};
</script>

<style scoped>
/* 可选的样式调整 */
.container {
  padding: 20px;
}
</style>

2. 确保样式被正确加载

由于小程序对CSS的支持有限，建议将样式内联到组件上，如上例所示。同时，确保在manifest.json中配置了对应小程序的样式兼容设置。

3. 注意事项

  • 平台差异：不同小程序平台对CSS的支持程度不同，因此可能需要根据具体平台进行微调。
  • 性能考虑：尽量避免使用大量内联样式，以免影响页面加载性能。可以考虑使用预处理器或CSS变量来管理样式。
  • 动态宽度：如果列宽需要动态调整，可以考虑使用JavaScript动态设置样式。

通过上述方法，你应该能够在uni-app中更好地控制uni-table组件的列宽，确保在不同小程序平台上都能正确显示。

回到顶部