uniapp中如何使用原生table标签

在uniapp中如何使用原生table标签？我尝试直接使用HTML的

标签，但发现渲染效果不符合预期。请问是否需要特殊的组件或配置才能实现表格功能？如果不能用原生table，uniapp推荐的替代方案是什么？最好能提供简单的代码示例说明用法。

2 回复

uniapp中无法直接使用原生table标签，因为小程序环境不支持。建议使用view配合flex布局模拟表格，或使用uni-table组件。


在uni-app中，无法直接使用HTML的原生<table>标签，因为uni-app基于Vue.js，编译到小程序等平台时原生HTML标签不被支持。但可以通过以下方法实现表格效果：

1. 使用<view>模拟表格（推荐）

<view class="table">
  <view class="tr">
    <view class="th">姓名</view>
    <view class="th">年龄</view>
  </view>
  <view class="tr">
    <view class="td">张三</view>
    <view class="td">25</view>
  </view>
</view>

.table { display: table; width: 100%; }
.tr { display: table-row; }
.th, .td { display: table-cell; padding: 8px; border: 1px solid #ddd; }
.th { font-weight: bold; background-color: #f5f5f5; }

2. 使用<uni-table>组件（官方扩展）

需安装@dcloudio/uni-ui：

npm install @dcloudio/uni-ui

<uni-table>
  <uni-tr>
    <uni-th>姓名</uni-th>
    <uni-th>年龄</uni-th>
  </uni-tr>
  <uni-tr>
    <uni-td>张三</uni-td>
    <uni-td>25</uni-td>
  </uni-tr>
</uni-table>

注意事项：

  • 方法1兼容性最好，全平台支持
  • 方法2需引入组件库，功能更丰富（支持排序、筛选等）
  • 表格复杂时建议用scroll-view包裹实现横向滚动

根据需求选择合适方案即可。

回到顶部