uniapp uni-table
时间: 2023-12-20 18:05:50 浏览: 173
uni-app table表格
5星 · 资源好评率100%
uni-table是uni-ui框架中的一个表格组件,可以实现表格的展示、排序、筛选、分页等功能。下面是uni-table和uni-pagination组件的使用示例和完整代码:
```html
<template>
<view class="content">
<uni-table :columns="columns" :data="tableData" :pagination="pagination"></uni-table>
<uni-pagination :current="pagination.current" :total="pagination.total" :page-size="pagination.pageSize" @change="onPageChange"></uni-pagination>
</view>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '性别',
key: 'gender'
}
],
tableData: [
{
name: '张三',
age: 18,
gender: '男'
},
{
name: '李四',
age: 20,
gender: '女'
},
{
name: '王五',
age: 22,
gender: '男'
}
],
pagination: {
current: 1,
total: 3,
pageSize: 1
}
}
},
methods: {
onPageChange(page) {
this.pagination.current = page
}
}
}
</script>
```
上述代码中,我们首先引入了uni-table和uni-pagination组件,并在template中使用了这两个组件。其中,uni-table组件的columns属性定义了表格的列,data属性定义了表格的数据,pagination属性定义了分页的相关信息。uni-pagination组件的current属性定义了当前页码,total属性定义了总数据量,pageSize属性定义了每页显示的数据量。在methods中,我们定义了onPageChange方法,用于处理分页变化事件。
除了uni-table组件,还可以使用改版后的uni-table插件,实现单击行事件、***```html
<template>
<view class="content">
<uni-table :columns="columns" :data="tableData" :pagination="pagination" @row-click="onRowClick" @cell-click="onCellClick"></uni-table>
<uni-pagination :current="pagination.current" :total="pagination.total" :page-size="pagination.pageSize" @change="onPageChange"></uni-pagination>
</view>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '性别',
key: 'gender'
}
],
tableData: [
{
name: '张三',
age: 18,
gender: '男'
},
{
name: '李四',
age: 20,
gender: '女'
},
{
name: '王五',
age: 22,
gender: '男'
}
],
pagination:
阅读全文