el-pagination 在可以选择每页条数的基础上,如何增加,可以在el-table中,显示所有数据的选项
时间: 2023-12-20 15:05:24 浏览: 113
el-search-table-pagination::dog_face:将Element UI的Form,Table和Pagination组件组合在一起
可以通过在 el-pagination 的 select 组件中增加一个选项来实现显示所有数据的功能。具体操作如下:
1. 在 el-pagination 中添加一个带有 "显示全部" 选项的 select 组件:
```html
<el-pagination
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
<span slot="sizes" class="page-size-select">
<el-select v-model="pageSize" size="small">
<el-option label="10 条/页" value="10"></el-option>
<el-option label="20 条/页" value="20"></el-option>
<el-option label="50 条/页" value="50"></el-option>
<el-option label="100 条/页" value="100"></el-option>
<el-option label="显示全部" value="all"></el-option>
</el-select>
</span>
</el-pagination>
```
2. 在 el-table 中根据选中的每页条数显示数据:
```html
<el-table :data="tableData" :row-key="row => row.id" v-loading="loading" :max-height="maxHeight">
<!-- el-table-column 组件定义表格列 -->
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="age" label="年龄" width="80"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
3. 在 Vue 实例中根据 pageSize 的值来决定显示的数据:
```javascript
new Vue({
el: '#app',
data: {
tableData: [],
total: 0,
pageSize: 10,
loading: false,
maxHeight: 500
},
methods: {
handleSizeChange(size) {
this.pageSize = size
this.getTableData()
},
handleCurrentChange(page) {
this.getTableData()
},
getTableData() {
this.loading = true
// 根据 this.pageSize 的值来决定需要请求的数据条数
const limit = this.pageSize === 'all' ? this.total : this.pageSize
// 发送请求获取数据,此处省略
// ...
this.loading = false
}
},
mounted() {
// 初始化时获取数据
this.getTableData()
}
})
```
通过以上操作,就可以在 el-pagination 中增加显示所有数据的选项,并且在 el-table 中根据选中的每页条数显示数据了。
阅读全文