el-table 显示固订高度
时间: 2023-10-02 16:05:23 浏览: 45
要在 el-table 中设置固定高度,你可以使用 CSS 来实现。你可以为 el-table 的外部容器元素设置一个固定的高度,并将其样式设置为 `overflow: auto;`。这样,如果 el-table 的内容超过容器的高度,就会显示滚动条。
以下是一个示例:
```html
<div style="height: 400px; overflow: auto;">
<el-table :data="tableData" style="width: 100%">
<!-- 表格的列 -->
</el-table>
</div>
```
在这个示例中,外部容器的高度被设置为 400px,并且 `overflow` 属性被设置为 `auto`。这将使得容器在内容超过容器高度时显示滚动条。同时,el-table 的宽度被设置为 100%。
你可以根据实际需求调整外部容器的高度和 el-table 的样式。希望这可以帮助到你!
相关问题
el-table 设置固定高度
可以通过设置 el-table 的 height 属性来实现固定高度,例如:
```html
<el-table :data="tableData" height="300px">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
其中,height 属性设置为 300px,代表表格的高度为 300 像素。这样,在数据过多时,表格会自动出现纵向滚动条,保证表格高度不变,不会影响页面布局。
el-table 分页固定table高度
你可以通过设置 `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` 分页固定高度的效果了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)