elementui表格固定表头 内容滚动 表格最大高度453
时间: 2023-09-02 22:14:00 浏览: 48
要实现 ElementUI 表格固定表头,可以设置 `height` 属性和 `max-height` 属性,并将 `max-height` 设置为 `453px`。同时,需要将表格的 `overflow-y` 属性设置为 `auto`,使得内容可以滚动。
以下是一个示例代码:
```html
<template>
<div>
<el-table
:data="tableData"
height="400"
max-height="453px"
:style="{overflowY: 'auto'}">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
```
在这个示例中,表格的高度为 `400px`,而 `max-height` 属性被设置为 `453px`,以确保当表格数据超过 `400px` 时,表格可以滚动。同时,`overflow-y` 属性被设置为 `auto`,以确保表格内容可以垂直滚动。
相关问题
elementui表格固定表头 内容滚动
要在 ElementUI 表格中固定表头并且内容可以滚动,可以使用 `el-table` 的 `height` 属性来指定表格高度,然后使用 `max-height` 属性来限制表格内容的最大高度。同时,使用 `fixed` 属性来固定表头。
例如:
```html
<template>
<el-table :data="tableData" height="300" max-height="300">
<el-table-column prop="name" label="Name" fixed></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: "John", age: 20, gender: "Male" },
{ name: "Jane", age: 25, gender: "Female" },
{ name: "Bob", age: 30, gender: "Male" },
{ name: "Alice", age: 35, gender: "Female" },
],
};
},
};
</script>
```
在这个例子中,表格的高度被设置为 300px,并且最大高度也被设置为 300px。表头被固定,而内容可以滚动。
如何实现elementui中固定表头的表格滚动到底部后加载更多
要实现在 element-ui 中固定表头并滚动到底部加载更多数据,需要使用 el-table 组件中的 "body-style" 属性和 "scroll" 属性。
1. 使用 "body-style" 属性设置表格内容的高度和 overflow 属性。例如:
```
<el-table :data="tableData" body-style="height: 200px;overflow-y: auto;">
```
2. 使用 "scroll" 属性设置表格滚动的宽度和高度。例如:
```
<el-table :data="tableData" :body-style="{height: '200px',overflow: 'auto'}" :scroll="{y: '200px'}">
```
3. 然后监听滚动条滚动事件,判断是否已滚动到底部,然后加载更多数据
```
<el-table ref="elTable" :data="tableData"
:body-style="{height: '200px',overflow: 'auto'}"
:scroll="{y: '200px'}"
@scroll="handleScroll"
>
</el-table>
methods: {
handleScroll(event) {
//event.srcElement 就是el-table-body,可以判断是否已滚动到底部
if (event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight) {
//加载更多数据
...
}
}
}
```