当前位置：首页 > uni-app

uniapp生成表格

2026-02-06 00:45:41uni-app

uniapp 生成表格的方法

在 uniapp 中生成表格可以通过多种方式实现，以下是几种常见的方法：

使用 table 标签（仅H5端支持） 在H5端可以直接使用HTML的 table 标签来创建表格。这种方式简单直接，但仅适用于H5平台，无法跨平台使用。

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

使用 uni-table 组件（推荐跨平台方案） uniapp 提供了 uni-table 组件，这是一个跨平台的表格解决方案。需要在 pages.json 中配置easycom规则来自动引入组件。

uniapp生成表格

<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>

使用 view 和 flex 布局模拟表格 通过 view 组件结合flex布局可以模拟表格效果，这种方式完全跨平台。

<view class="table">
  <view class="row header">
    <view class="cell">姓名</view>
    <view class="cell">年龄</view>
  </view>
  <view class="row">
    <view class="cell">张三</view>
    <view class="cell">25</view>
  </view>
</view>

.table {
  width: 100%;
}
.row {
  display: flex;
}
.header {
  font-weight: bold;
}
.cell {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
}

使用第三方表格组件 uniapp 生态中有一些第三方表格组件可供选择，如 u-table、mescroll-uni 等。这些组件通常提供更丰富的功能，如固定表头、滚动加载等。

uniapp生成表格

<u-table
  :columns="columns"
  :data="data"
></u-table>

export default {
  data() {
    return {
      columns: [
        {title: '姓名', key: 'name'},
        {title: '年龄', key: 'age'}
      ],
      data: [
        {name: '张三', age: 25},
        {name: '李四', age: 30}
      ]
    }
  }
}

动态生成表格数据 实际开发中，表格数据通常来自接口请求。可以结合上述任意方法，动态渲染表格。

export default {
  data() {
    return {
      tableData: []
    }
  },
  onLoad() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await uni.request({
        url: 'https://example.com/api/data'
      })
      this.tableData = res.data
    }
  }
}

表格样式优化 为了提升表格的视觉效果，可以添加一些样式优化：

/* 斑马纹效果 */
.row:nth-child(even) {
  background-color: #f9f9f9;
}

/* 悬停效果 */
.row:hover {
  background-color: #f5f5f5;
}

/* 单元格对齐 */
.cell {
  text-align: center;
}

注意事项