el-table 分页固定table高度
时间: 2023-07-12 14:38:42 浏览: 94
按高度进行分页代码
你可以通过设置 `max-height` 属性来固定 `el-table` 的高度,然后在设置分页时,将每页显示的行数设置为固定值,从而实现分页固定表格高度的效果。
具体实现步骤如下:
1. 在 `el-table` 上设置 `max-height` 属性,例如:
```html
<el-table :data="tableData" max-height="300px">
<!-- 表格列定义 -->
</el-table>
```
2. 在分页器上设置 `page-size` 属性,例如:
```html
<el-pagination
:total="total"
:page-size="10"
@current-change="handleCurrentChange"
/>
```
其中,`:page-size` 属性表示每页显示的行数,可以根据实际情况进行调整。
3. 在 `handleCurrentChange` 方法中,根据当前页数和每页显示的行数,计算出表格的滚动高度,然后设置给 `el-table` 的 `scrollTop` 属性,例如:
```js
methods: {
handleCurrentChange(val) {
const scrollTop = (val - 1) * 10 * 40; // 假设每行高度为 40px
this.$nextTick(() => {
this.$refs.table.$el.scrollTop = scrollTop;
});
}
}
```
其中,`$refs.table.$el` 表示 `el-table` 的 DOM 元素,通过设置其 `scrollTop` 属性来实现表格的滚动。
通过以上步骤,就可以实现 `el-table` 分页固定高度的效果了。
阅读全文