el-pagination和el-table,如何增加显示所有数据的选项
时间: 2023-10-17 17:08:41 浏览: 88
对于el-table,你可以使用`show-overflow-tooltip`属性来显示超出宽度的内容,这样就可以在表格中显示所有数据。
对于el-pagination,可以通过设置`page-sizes`属性来增加显示所有数据的选项。例如,将`page-sizes`属性设置为`[10, 20, 50, 100, 0]`,其中0表示显示所有数据。然后在模板中添加一个`el-select`组件,绑定到`page-size`属性。如下所示:
```html
<el-pagination
:total="total"
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 0]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
<el-select v-model="pageSize" slot="sizes">
<el-option
v-for="size in [10, 20, 50, 100, 0]"
:key="size"
:label="size === 0 ? '全部' : size + '条/页'"
:value="size">
</el-option>
</el-select>
```
然后在`handleSizeChange`回调函数中,当用户选择“全部”时,设置`pageSize`为`total`,这样就可以实现显示所有数据的功能。
```javascript
handleSizeChange(size) {
if (size === 0) {
this.pageSize = this.total;
}
}
```
这样就可以在el-pagination中增加显示所有数据的选项。
阅读全文