uniapp 数据表格

uniapp 数据表格实现方法

使用 uni-table 组件

uniapp 提供了 uni-table 组件用于展示表格数据，支持多列布局和基础样式。通过 uni-tr 定义行，uni-th 定义表头，uni-td 定义单元格。

<uni-table>
  <uni-tr>
    <uni-th>姓名</uni-th>
    <uni-th>年龄</uni-th>
  </uni-tr>
  <uni-tr v-for="(item, index) in tableData" :key="index">
    <uni-td>{{ item.name }}</uni-td>
    <uni-td>{{ item.age }}</uni-td>
  </uni-tr>
</uni-table>

自定义表格样式

若需更灵活的样式控制，可通过 CSS 自定义表格外观。使用 view 组件模拟表格结构，结合 flex 布局实现响应式设计。

<view class="custom-table">
  <view class="table-row header">
    <view class="table-cell">姓名</view>
    <view class="table-cell">年龄</view>
  </view>
  <view class="table-row" v-for="(item, index) in tableData" :key="index">
    <view class="table-cell">{{ item.name }}</view>
    <view class="table-cell">{{ item.age }}</view>
  </view>
</view>

.custom-table {
  width: 100%;
  border: 1px solid #ddd;
}
.table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.header {
  font-weight: bold;
  background-color: #f5f5f5;
}
.table-cell {
  flex: 1;
  padding: 8px;
  text-align: center;
}

第三方组件库

推荐使用 uView UI 或 uni-ui 的增强表格组件，支持排序、分页、固定列等高级功能。以 uView 的 u-table 为例：

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

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

动态加载与分页

结合后端 API 实现数据动态加载，通过 onReachBottom 监听触底事件加载下一页数据。

export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      tableData: [],
      total: 0
    }
  },
  methods: {
    loadData() {
      uni.request({
        url: 'https://api.example.com/data',
        data: { page: this.page, pageSize: this.pageSize },
        success: (res) => {
          this.tableData = [...this.tableData, ...res.data.list]
          this.total = res.data.total
        }
      })
    }
  },
  onReachBottom() {
    if (this.tableData.length < this.total) {
      this.page++
      this.loadData()
    }
  },
  onLoad() {
    this.loadData()
  }
}