当前位置：首页 > uni-app

uniapp实现表格

2026-02-05 20:44:07uni-app

uniapp实现表格的方法

uniapp可以通过多种方式实现表格功能，以下是几种常见的方法：

使用uni-table组件

uniapp官方提供了uni-table组件，可以快速实现表格布局。需要引入uni-table、uni-tr、uni-th、uni-td等子组件。

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>

使用HTML原生table标签

uniapp支持HTML5标准，可以直接使用table标签创建表格。

<table>
  <tr>
    <th>产品</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>手机</td>
    <td>2999</td>
  </tr>
</table>

使用view模拟表格

通过flex布局或grid布局，使用view组件模拟表格效果，这种方式更灵活。

uniapp实现表格

<view class="table">
  <view class="row header">
    <view class="cell">ID</view>
    <view class="cell">名称</view>
  </view>
  <view class="row">
    <view class="cell">1</view>
    <view class="cell">测试数据</view>
  </view>
</view>

.table {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
}
.header {
  font-weight: bold;
}
.cell {
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
}

使用第三方组件库

可以使用uView、colorUI等uniapp第三方UI库中的表格组件，功能更丰富。

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

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

实现表格排序和筛选

可以通过自定义方法实现表格数据的排序和筛选功能。

methods: {
  sortTable(key) {
    this.list.sort((a, b) => a[key] - b[key])
  },
  filterTable(keyword) {
    return this.list.filter(item => item.name.includes(keyword))
  }
}