uni-table
时间: 2025-03-13 19:05:21 浏览: 35
### uni-table 使用说明
#### 表格基础功能
`uni-table` 是 UniApp 提供的一个用于展示表格数据的基础组件。此组件能够帮助开发者快速构建具有分页、排序等功能的数据表格[^1]。
#### 实现分页查询
为了实现带有分页效果的表格显示,可以在 `uni-table` 组件之外包裹一层 `uni-pagination` 分页器组件来控制当前页码以及每页显示多少项等内容。具体来说,在 HTML 结构上表现为:
```html
<!-- 分页器 -->
<view>
<!-- 表格部分 -->
<uni-table :current="currentPage" :pageSize="itemsPerPage">
...
</uni-table>
<!-- 分页控件 -->
<uni-pagination
:total="totalCount"
@change="handlePageChange"/>
</view>
```
其中 `:current`, `:pageSize` 和 `@change` 都是用来绑定属性或者事件处理函数的关键字;而 `totalCount` 则表示总共有多少条记录可以被浏览查看[^5]。
#### 数据获取逻辑
当用户点击不同的页面按钮时触发 change 事件,并调用 handlePageChange 方法更新 currentPage 的值从而改变实际渲染出来的那一部分内容。此时服务端应当接收到来自客户端发送过来关于 page 和 pageSize 参数的信息以便于执行相应的 SQL 查询语句返回指定范围内的结果集给前端应用进行呈现。
#### 示例代码片段
下面给出一段简单的 Vue.js 单文件组件 (SFC) 中如何集成上述提到的功能点的例子:
```vue
<script setup lang="ts">
import { ref } from 'vue';
const totalCount = ref(10); // 总数
const itemsPerPage = ref(6); // 每页数量
const currentPage = ref(1);
function handlePageChange(e){
console.log('切换到了', e.current);
}
</script>
<template>
<view class="container">
<uni-table :current="currentPage" :pageSize="itemsPerPage"></uni-table>
<uni-pagination
v-model:current="currentPage"
:pageSize="itemsPerPage"
:total="totalCount"
@change="handlePageChange"/>
</view>
</template>
```
阅读全文
相关推荐


















