iview table 组件与分页
时间: 2024-05-15 20:12:28 浏览: 94
iView Table 组件提供了内置的分页功能,可以通过设置 `pagination` 属性来启用分页。例如:
```html
<template>
<Table :data="tableData" :columns="columns" :pagination="pagination"/>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park' },
{ name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park' },
{ name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park' },
{ name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park' }
],
columns: [
{ title: 'Name', key: 'name' },
{ title: 'Age', key: 'age' },
{ title: 'Address', key: 'address' }
],
pagination: {
current: 1,
total: 4,
pageSize: 2
}
}
}
}
</script>
```
其中,`pagination` 对象包含三个属性:
- `current`:当前页码,必须从 1 开始计数。
- `total`:总数据量。
- `pageSize`:每页显示的数据量。
当设置了 `pagination` 属性后,iView Table 组件会自动显示分页器,并且根据数据量和每页显示的数据量计算出总页数。用户可以通过分页器来切换当前页码,iView Table 组件会自动根据当前页码和每页显示的数据量来显示对应的数据。
阅读全文