uniapp 数据表格
数据表格的实现方式
在 UniApp 中实现数据表格可以通过以下几种方法，具体选择取决于项目需求和开发偏好。
使用 uni-table 组件
UniApp 官方提供了 uni-table 组件，适合展示结构化数据。以下是一个简单示例：
<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>export default {
data() {
return {
tableData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 }
]
}
}
}使用第三方 UI 库
如果需要更丰富的功能（如排序、分页），可以集成第三方 UI 库：
- uView UI：提供
u-table组件，支持复杂表格功能。 - ThorUI：包含高性能表格组件，适合大数据量渲染。
以 uView 为例：
<u-table :data="tableData">
<u-table-column prop="name" label="姓名"></u-table-column>
<u-table-column prop="age" label="年龄"></u-table-column>
</u-table>自定义表格布局
对于高度定制化的需求，可以使用 view 和 flex 布局手动实现：
<view class="table">
<view class="row header">
<view class="cell">姓名</view>
<view class="cell">年龄</view>
</view>
<view class="row" v-for="(item, index) in tableData" :key="index">
<view class="cell">{{ item.name }}</view>
<view class="cell">{{ item.age }}</view>
</view>
</view>.table {
width: 100%;
}
.row {
display: flex;
}
.cell {
flex: 1;
padding: 10px;
border: 1px solid #eee;
}高级功能实现
分页加载
通过组合 uni-pagination 组件实现分页：
<uni-table>...</uni-table>
<uni-pagination
:total="total"
:current="current"
@change="handlePageChange"
/>methods: {
handlePageChange(e) {
this.current = e.current
this.loadData()
}
}数据排序
添加排序逻辑到列标题：
<uni-th @click="sortBy('age')">
年龄 <uni-icon :type="sortIcon"></uni-icon>
</uni-th>methods: {
sortBy(key) {
this.tableData.sort((a, b) => a[key] - b[key])
}
}性能优化建议
- 大数据量时使用虚拟滚动（如
uni-list的滚动加载） - 避免在表格单元格中使用复杂计算
- 分页加载数据而非一次性渲染
- 使用 CSS
will-change属性提升动画性能
跨平台注意事项
- H5 端可使用标准 HTML 表格元素
- 小程序端需注意节点数量限制
- APP 端可考虑原生组件提升性能
